@charset "utf-8";

/* ---------- history ---------- */
#history .tab-menu { border: 1px solid var(--border-01); display: flex; justify-content: flex-start; align-items: flex-start; }
#history .tab-menu > li { position: relative; width: 16.666%; border-right: 1px solid var(--border-01); cursor: pointer; }
#history .tab-menu > li:last-child { border-right: 0; }
#history .tab-menu > li p { position: relative; z-index: 1;; line-height: 58px; font-size: 15px; font-weight: 500; text-align: center; }
#history .tab-menu > li.on:before { position: absolute; z-index: 0; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background: var(--mc); display: block; content: ""; }
#history .tab-menu > li.on { background: var(--mc); }
#history .tab-menu > li.on p { color: #fff; }
#history .tab-con > li { display: none; }
#history .tab-con > li.on { display: block; }
#history .history-bg { position: relative; margin: 40px 0; width: 100%; height: 0; padding-top: 20%; }
#history .history-bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#history .history-bg p { position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 100%; font-size: 36px; color: #fff; font-weight: 300; text-align: center; }
#history .history-bg span { font-weight: 500; }
#history .his-wrap { margin-top: 80px; display: flex; justify-content: space-between; align-items: flex-start; }
#history .his-wrap .year { position: relative; padding: 40px 0 0 40px; width: 30%; font-size: 48px; font-weight: 700; color: var(--gray-11); border-top: 2px solid var(--mc); }
#history .his-wrap .year:before { position: absolute; top: 68px; left: 0; width: 18px; height: 18px; background: url(/theme/gospelch_new/images/ico/deco.svg) no-repeat center/contain; display: block; content: ""; }
#history .his-box { width: calc(70% - 40px); border-top: 1px solid var(--border-01); }
#history .his-con { padding: 20px; display: flex; justify-content: flex-start; align-items: flex-start; border-top: 1px solid var(--border-01); }
#history .his-con .date { width: 200px; font-size: 16px; font-weight: 700; color: var(--gray-33); flex-shrink: 0; }
#history .his-con .text { margin: -5px 0; }
#history .his-con .text > p { margin: 5px 0; font-size: 16px; color: var(--gray-61); }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #history .tab-menu > li p { line-height: 48px; font-size: 13px; }
    #history .history-bg { margin: 20px 0; }
    #history .history-bg p { font-size: 24px; }
    #history .his-wrap { margin-top: 60px; }
    #history .his-wrap .year { padding: 30px 0 0 30px; width: 25%; font-size: 34px; }
    #history .his-wrap .year:before { top: 44px; }
    #history .his-box { width: calc(75% - 20px);  }
    #history .his-con { padding: 15px; }
    #history .his-con .date { width: 150px; font-size: 14px; }
    #history .his-con .text { margin: -3px 0; }
    #history .his-con .text > p { margin: 3px 0; font-size: 14px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #history .tab-menu { flex-wrap: wrap; }
    #history .tab-menu > li { width: 33.333%; }
    #history .tab-menu > li p { line-height: 43px; font-size: 11px; }
    #history .tab-menu > li:nth-child(1) { border-bottom: 1px solid var(--border-01); }
    #history .tab-menu > li:nth-child(2) { border-bottom: 1px solid var(--border-01); }
    #history .tab-menu > li:nth-child(3) { border-bottom: 1px solid var(--border-01); border-right: 0; }
    #history .history-bg { min-height: 150px; }
    #history .history-bg p { font-size: 18px; }
    #history .his-wrap { margin-top: 60px; }
    #history .his-wrap .year { padding: 50px 0 0 00px; width: 70px; font-size: 20px; }
    #history .his-wrap .year:before { top: 28px; }
    #history .his-box { width: calc(100% - 85px);  }
    #history .his-con { padding: 15px 0; display: block; }
    #history .his-con .date { width: 100%; font-size: 14px; }
    #history .his-con .text { margin: 7px 0 0; }
    #history .his-con .text > p { margin: 0; font-size: 13px; }
}