@charset "utf-8";

/* ---------------------------------------
    common
--------------------------------------- */
#container {
    position:relative;
    overflow:hidden;
    background: #F9F8F7;
    background:
            radial-gradient(circle at 18% 15%,
            rgba(255,255,255,.95) 0%,
            rgba(248,246,243,.55) 45%,
            transparent 75%),
            radial-gradient(circle at 88% 12%,
            rgba(255,255,255,.75) 0%,
            rgba(246,242,238,.55) 38%,
            transparent 70%),
            linear-gradient(
                    180deg,
                    #FCFBFA 0%,
                    #F8F7F5 100%
            );
    z-index:10;
}
#container::before {
    content:"";
    position:absolute;
    right: 180px;
    top: 70px;
    width: 700px;
    height: 700px;
    background:radial-gradient(
            circle,
            rgba(255,255,255,.85) 0%,
            rgba(255,255,255,.15) 55%,
            transparent 80%
    );
    pointer-events:none;
}

/* ---------------------------------------
    .col1 - 메인배너
--------------------------------------- */
#container .col1 {
    position: relative;
    padding: 44px 0 24px;
}
#container .col1 .bg-building {
    position:absolute;
    right: 0;
    top: -120px;
    width: 1536px;
    height: 1024px;
    background: url(/donation/images/main/bg_main_banner_v2.png) right top no-repeat;
    background-size:contain;
    opacity:.45;
    pointer-events:none;
    z-index: 1;
}
#container .col1 .inner-wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    padding: 0 64px;
    z-index: 2;
}

/* .info-area */
#container .col1 .inner-wrap .info-area {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
}
#container .col1 .inner-wrap .info-area .title-area {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
#container .col1 .inner-wrap .info-area .title-area .title {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
#container .col1 .inner-wrap .info-area .title-area .title span {
    line-height: 1;
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(
            135deg,
            #D79E80 0%,
            #B87456 52%,
            #9F5D45 64%,
            #C98B68 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color: transparent;
}
#container .col1 .inner-wrap .info-area .title-area .title strong {
    line-height: 1;
    font-size: 64px;
    font-weight: 900;
    background: linear-gradient(
            135deg,
            #D79E80 0%,
            #c58264 52%,
            #c7866d 64%,
            #C98B68 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color: transparent;
}
#container .col1 .inner-wrap .info-area .title-area p {
    line-height: 1.6;
    font-size: 19px;
    font-weight: 600;
    word-break: keep-all;
}

/* .btn-area */
#container .col1 .inner-wrap .info-area .btn-area {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
}
#container .col1 .inner-wrap .info-area .btn-area .btn {
    padding: 10px 24px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

/* .btn-area .btn-donate */
#container .col1 .inner-wrap .info-area .btn-area .btn.btn-donate {
    display:inline-flex;
    justify-content:center;
    align-items:center;

    position:relative;
    overflow:hidden;
    border: 1px solid rgba(198,143,122,1);
    transition:all .35s ease;
    background:linear-gradient(
            180deg,
            #E9B8A3 0%,
            #D89D84 35%,
            #C8876F 70%,
            #B9755E 100%
    );
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35),
            0 10px 24px rgba(184,117,94,.18);
}
#container .col1 .inner-wrap .info-area .btn-area .btn-donate::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
            180deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,0) 45%
    );
    pointer-events:none;
}
#container .col1 .inner-wrap .info-area .btn-area .btn.btn-donate:hover {
    transform: translateY(-2px);

    background: linear-gradient(
            180deg,
            #F1C8B8 0%,
            #E4AE95 35%,
            #D29176 70%,
            #C07D65 100%
    );

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.45),
            0 18px 40px rgba(184,117,94,.28);
}
#container .col1 .inner-wrap .info-area .btn-area .btn-donate::after {
    content:"";
    position:absolute;
    top:-30%;
    left:-40%;
    width:30%;
    height:170%;
    background:linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
    );
    transform:skewX(-25deg);
    transition:left .8s ease;
}
#container .col1 .inner-wrap .info-area .btn-area .btn-donate:hover::after {
    left:140%;
}

/* .btn-area .btn-outline */
#container .col1 .inner-wrap .info-area .btn-area .btn-outline {
    display:inline-flex;
    justify-content:center;
    align-items:center;

    position:relative;
    overflow:hidden;
    color: #1D3A8F;
    text-decoration:none;
    background:#ffffff;
    border: 1px solid rgba(29,58,143,.25);
    transition:all .35s ease;
    box-shadow:
            0 8px 18px rgba(0,0,0,.04),
            inset 0 1px 0 rgba(255,255,255,.8);
}
#container .col1 .inner-wrap .info-area .btn-area .btn-outline::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
            180deg,
            rgba(255,255,255,.75),
            rgba(255,255,255,0) 45%
    );
    pointer-events:none;
}
#container .col1 .inner-wrap .info-area .btn-area .btn-outline:hover{
    color:#ffffff;
    border: 1px solid #1D3A8F;
    background:linear-gradient(
            180deg,
            #2F54B8 0%,
            #1D3A8F 45%,
            #153074 100%
    );
    transform:translateY(-2px);
    box-shadow:
            0 16px 34px rgba(29,58,143,.28);
}
#container .col1 .inner-wrap .info-area .btn-area .btn-outline::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-45%;
    width:30%;
    height:180%;
    background:linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
    );
    transform:skewX(-25deg);
    transition:left .8s ease;
}

#container .col1 .inner-wrap .info-area .btn-area .btn-outline:hover::after{
    left: 140%;
}

/* .logo-80th */
#container .col1 .inner-wrap .logo-80th {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;

    margin: 24px 72px 0 0;
    font-family:'Cinzel', serif;
    color: #D8998A;
}
#container .col1 .inner-wrap .logo-80th .num {
    position: relative;
    overflow: hidden;
    display: inline-block;
    height: 158px;
    line-height: 0.9;
    font-size: 200px;
    font-weight: 900;
    letter-spacing: -2px;
    background: linear-gradient(
            135deg,
            #FFF8F5 0%,
            #F3D9CA 10%,
            #E7BFA8 22%,
            #D79E80 38%,
            #B87456 52%,
            #9F5D45 64%,
            #C98B68 78%,
            #E6C6B2 90%,
            #FFF6F2 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
    text-shadow:
            0 1px 0 rgba(255,255,255,.25),
            0 2px 8px rgba(165,110,82,.18);

    filter: drop-shadow(0 2px 4px rgba(168,110,82,.15));
    user-select: none;
}
#container .col1 .inner-wrap .logo-80th .num::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -30%;
    overflow: hidden;
    width: 18%;
    height: 120%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
    );
    transform: skewX(-25deg);
    animation: shine 5s infinite;
}
@keyframes shine{
    0%{
        left:-30%;
    }
    100%{
        left:130%;
    }
}
#container .col1 .inner-wrap .logo-80th .year {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;

    margin-bottom: 12px;
}
#container .col1 .inner-wrap .logo-80th .year b {
    line-height: 1;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 3px;
}
#container .col1 .inner-wrap .logo-80th .year small {
    line-height: 1;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 3px;
}
#container .col1 .inner-wrap .logo-80th .abbr {
    line-height: 1.4;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #000;
}

/* ---------------------------------------
    .col2
--------------------------------------- */
#container .col2 {
    padding: 32px 0 64px;
}
#container .col2 .inner-wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 24px;

    z-index: 2;
}

/* ===========================================================
   대한전기학회 80년사
=========================================================== */
#container .col2 .inner-wrap > div {
    display: flex;
    width: 100%;
    min-height: 300px;
    border-radius: 30px;
}
#container .col2 .inner-wrap .history-area {
    flex: 0 0 422px;
    display:flex;
    flex-direction:column;

    position:relative;
    width:100%;
    height:100%;
    padding: 44px 32px;
    background: #fff url("/donation/images/main/bg_history_area.jpg") center center no-repeat;
    background-size: 86%;
    border-radius:28px;
    border:1px solid rgba(29,58,143,.05);
    box-shadow:
            0 10px 35px rgba(18,34,62,.06);
    transition:
            transform .35s ease,
            box-shadow .35s ease;
}
#container .col2 .inner-wrap .history-area .history-area:hover {
    transform:translateY(-4px);
    box-shadow:
            0 24px 60px rgba(18,34,62,.08);
}

#container .col2 .inner-wrap .history-area .history__title{
    margin-bottom: 32px;
    text-align:center;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
    color: #1E2B44;
}

#container .col2 .inner-wrap .history-area .history__timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap: 24px;
    flex:1;
    margin: 0;
}

#container .col2 .inner-wrap .history-area .history__timeline::before{
    content: "";
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 0;
    width: 2px;
    margin: 0;
    padding: 0;
    background:
            repeating-linear-gradient(
                    to bottom,
                    #E5B09A 0 2px,
                    transparent 2px 4px
            );
}

#container .col2 .inner-wrap .history-area .history__item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap: 6px;
}
#container .col2 .inner-wrap .history-area .history__item:last-child {
    padding: 0 0 24px;
}

#container .col2 .inner-wrap .history-area .history__icon{
    position:relative;
    left: -19px;
    z-index:2;
    width: 38px;
    height: 38px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#FFF8F5;
    border:2px solid #E5B09A;
    box-shadow:
            0 4px 12px rgba(217,153,138,.12);
}
#container .col2 .inner-wrap .history-area .history__icon .feather{
    width: 18px;
    height: 18px;
    color: #E5B09A;
}

#container .col2 .inner-wrap .history-area .history__content{
    flex:1;
    padding-top:2px;
}

#container .col2 .inner-wrap .history-area .history__year{
    display:inline-block;
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    color: #D07C5E;
}

#container .col2 .inner-wrap .history-area .history__content h4 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    color: #22314A;
    word-break: keep-all;
}

#container .col2 .inner-wrap .history-area .history__content p {
    margin:0;
    font-size:16px;
    line-height:1.8;
    color:#6B7280;
    word-break: keep-all;
}

#container .col2 .inner-wrap .history-area .history__button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #D89A82;
    color: #1E2B44;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}
#container .col2 .inner-wrap .history-area .history__button:hover{
    color:#fff;
    background:#1D3A8F;
    border-color:#1D3A8F;
    transform:translateY(-2px);
    box-shadow:
            0 12px 30px rgba(29,58,143,.18);
}

/* ==========================================
   회관 건립 기금 명예의 전당
========================================== */
#container .col2 .inner-wrap .hall-of-honor {
    flex: 0 0 660px;
    display: flex;
    flex-flow: column nowrap;

    position:relative;
    overflow:hidden;
    width:100%;
    padding: 32px 44px;
    border-radius: 30px;
    background:
            linear-gradient(
                    180deg,
                    #243750 0%,
                    #1E2F47 45%,
                    #19263B 100%
            );
    border:2px solid #D9A08B;
    box-shadow:
            0 25px 50px rgba(18,32,55,.18);
}

#container .col2 .inner-wrap .hall-of-honor .swiper,
#container .col2 .inner-wrap .hall-of-honor .swiper-wrapper,
#container .col2 .inner-wrap .hall-of-honor .swiper-slide {
    /* 세로 스크롤 및 핀치 줌만 허용하고, 좌우 제스처(슬라이드)는 브라우저 기본 스크롤로 넘김 */
    touch-action: pan-y !important;
}

/* 상단 하이라이트 */
#container .col2 .inner-wrap .hall-of-honor .hall-of-honor::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:140px;
    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,.08),
                    transparent
            );
}

/* Header */
#container .col2 .inner-wrap .hall-of-honor .hall-header{
    display:flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;

    position:relative;
    margin-bottom: 24px;
    padding: 12px 0 0;
    text-align:center;
    background-image: url(/donation/images/main/bg_hall-left.png), url(/donation/images/main/bg_hall-right.png);
    background-position: left top, right top;
    background-repeat: no-repeat;
    background-size: contain;
    z-index:2;
}
#container .col2 .inner-wrap .hall-of-honor .hall-icon{
    font-size:36px;
    margin-bottom:18px;
}
#container .col2 .inner-wrap .hall-of-honor .hall-header h2{
    margin:0;
    font-size: 38px;
    font-weight:700;
    color:#F6D1BF;
}
#container .col2 .inner-wrap .hall-of-honor .hall-header p{
    color:rgba(255,255,255,.72);
    font-size:16px;
    line-height:1.7;
}

/* List */
#container .col2 .inner-wrap .hall-of-honor .hall-list{
    position:relative;
    overflow:hidden;
    z-index:2;
    list-style:none;
    height: 520px;
    margin:0;
    padding:0;
}
#container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item{
    display:grid;
    grid-template-columns:
        30px
        1fr
        auto;
    gap:14px;
    align-items:center;

    padding:18px 0;
    border-bottom:
            1px solid rgba(255,255,255,.08);
}
#container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item .name {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    gap: 12px;
}
#container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item .name b {

}
#container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item .name small {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,.7);
}

/* 기부자가 없을 때 : 순위/이름/금액 3칸 격자를 쓰지 않고 한 줄로 둔다. */
#container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item--empty{
    display:block;
    white-space:nowrap;
    text-align:center;
    color:#ffffff;
}

#container .col2 .inner-wrap .hall-of-honor .rank{
    color:#D9A08B;
    font-size:18px;
    text-align:center;
}
#container .col2 .inner-wrap .hall-of-honor .name{
    color:#ffffff;
    font-size:18px;
    font-weight:500;
}

#container .col2 .inner-wrap .hall-of-honor .amount{
    color:#ffffff;
    font-size:18px;
    font-weight:700;
}

/* More */
#container .col2 .inner-wrap .hall-of-honor .hall-more{
    position:relative;
    z-index:2;
    margin:28px 0;
    text-align:center;
    color:#D9A08B;
    font-size:28px;
    letter-spacing:6px;
}

/* Button */
#container .col2 .inner-wrap .hall-of-honor .hall-btn{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:58px;
    margin-top: 32px;
    border-radius:10px;
    text-decoration:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
    background:
            linear-gradient(
                    180deg,
                    #E4B19A 0%,
                    #CF8D70 100%
            );
    transition:.35s;
}
#container .col2 .inner-wrap .hall-of-honor .hall-btn:hover{
    color:#fff;
    transform:translateY(-2px);
    background:
            linear-gradient(
                    180deg,
                    #EDC0AD 0%,
                    #D67F60 100%
            );
    box-shadow:
            0 14px 30px rgba(217,160,139,.25);
}

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

#container .col2 .inner-wrap .donation-introduce-area .donation-title {
    font-size:34px;
    font-weight:700;
    line-height:1.45;
    color:#1E2B44;
}

/* 카드 */
#container .col2 .inner-wrap .donation-introduce-area .donation-card{
    padding: 24px;
    background:#fff;
    border-radius:18px;
    border:1px solid #EEF1F6;
    box-shadow:
            0 8px 25px rgba(32,48,70,.05);
}
#container .col2 .inner-wrap .donation-introduce-area .donation-card h3{
    margin-bottom: 24px;
    text-align: center;
    font-size:24px;
    font-weight:800;
    color:#202A42;
}

/* 문의 */
#container .col2 .inner-wrap .donation-introduce-area .donation-contact{
    display:flex;
    align-items:center;
    gap: 26px;
    margin-bottom: 24px;
}
#container .col2 .inner-wrap .donation-introduce-area .icon{
    width:110px;
    height:110px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    border: 1px solid #F2E5E3;
    background-color: #fcf7f7;
}
#container .col2 .inner-wrap .donation-introduce-area .icon .feather{
    width: 56px;
    height: 56px;
    color: #D8998A;
}
#container .col2 .inner-wrap .donation-introduce-area .text strong{
    display:block;
    font-size: 17px;
    line-height:1.8;
    color:#1F2C45;
}

/* 버튼 */
#container .col2 .inner-wrap .donation-introduce-area .btn-outline{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:56px;
    margin-top: 16px;
    border-radius:8px;
    border:1px solid #D89A82;
    color:#1E2B44;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

#container .col2 .inner-wrap .donation-introduce-area .btn-outline:hover{
    background:#1D3A8F;
    color:#fff;
    border-color:#1D3A8F;
}

/* Chart */
#container .col2 .inner-wrap .donation-introduce-area .chart-wrap{
    display:flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
#container .col2 .inner-wrap .donation-introduce-area .chart-box{
    position:relative;
    width:200px;
    height:200px;
}
#container .col2 .inner-wrap .donation-introduce-area .chart-box canvas{
    position:relative;
    z-index:2;
    width:200px!important;
    height:200px!important;
}
#container .col2 .inner-wrap .donation-introduce-area .chart-center{
    position:absolute;
    z-index:1;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    width:90px;
    pointer-events:none;
}
#container .col2 .inner-wrap .donation-introduce-area .chart-center span{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:#333;
}
#container .col2 .inner-wrap .donation-introduce-area .chart-center strong{
    display:block;
    line-height:1.5;
    font-size:13px;
    font-weight:700;
    color: #000;
}
#container .col2 .inner-wrap .donation-introduce-area .legend{
    flex:1;
    display:flex;
    flex-direction:row;
    gap: 12px 2%;

    width: 100%;
    margin: 0;
    padding: 0;
}
#container .col2 .inner-wrap .donation-introduce-area .legend li{
    flex: 1 1 32%;
    display:flex;
    gap: 6px;
}
#container .col2 .inner-wrap .donation-introduce-area .dot{
    width:12px;
    height:12px;
    border-radius:3px;
    margin-top:6px;}
#container .col2 .inner-wrap .donation-introduce-area .blue{
    background:#315F97;
}
#container .col2 .inner-wrap .donation-introduce-area .pink{
    background:#D99A82;
}
#container .col2 .inner-wrap .donation-introduce-area .orange{
    background:#EDC2AF;
}
#container .col2 .inner-wrap .donation-introduce-area .legend strong{
    display:block;
    font-size:14px;
}
#container .col2 .inner-wrap .donation-introduce-area .legend p{
    color:#666;
    font-size:12px;
}