@charset "utf-8";

#container {
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 80px;
     --padding: 20px;
}

img {
     width: 100%;
}

.main-visual {
     height: 450px;
}
.main-visual img {
     height: 100%;
     object-fit: cover;
}

section {
     margin: 80px 0;
     padding-left: var(--padding);
     padding-right: var(--padding);
}
section > div {
     margin: 0 auto;
     max-width: var(--gs-layout-max-width);
}

.list-tab-section > div {
     display: flex;
     gap: 50px 40px;
     flex-wrap: wrap;
}
.list-tab-section .list-tab-wrap {
     flex-basis: calc(50% - 20px);
}

.page-links-list {
     display: flex;
     gap: 12px;
     --icon-1: url(../img/page-icon-bg-1.png);
     --icon-2: url(../img/page-icon-bg-2.png);
     --icon-3: url(../img/page-icon-bg-3.png);
     --icon-4: url(../img/page-icon-bg-4.png);
}
.page-links-list li {
     flex: 1;
}
.page-links-list a {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     position: relative;
     padding: 15px 45px;
     height: 176px;
     border-radius: 10px;
     background-color: var(--gs-brand-color);
     overflow: hidden;
     transform: translateY(0px);
     transition:
          transform var(--gs-duration),
          filter var(--gs-duration);
}
.page-links-list a::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
     border-radius: 10px;
}
.page-links-list .academic-journal::before {
     background-image: var(--icon-1);
}
.page-links-list .general-letter::before {
     background-image: var(--icon-2);
}
.page-links-list .gallery::before {
     background-image: var(--icon-3);
}
.page-links-list .webtoon::before {
     background-image: var(--icon-4);
}
.page-links-list a span {
     position: relative;
     color: #feebb5;
}
.page-links-list a::after {
     content: "";
     position: absolute;
     bottom: 15px;
     right: 20px;
     width: 23px;
     height: 16px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='21'%3E%3Cdefs%3E%3Cfilter filterUnits='userSpaceOnUse' id='h48v24sfha' x='0' y='0' width='23' height='21'%3E%3CfeOffset in='SourceAlpha' dy='2'/%3E%3CfeGaussianBlur result='blurOut'/%3E%3CfeFlood flood-color='%23000' result='floodOut'/%3E%3CfeComposite operator='atop' in='floodOut' in2='blurOut'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.3'/%3E%3C/feComponentTransfer%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23h48v24sfha)'%3E%3Ctext font-family='AppleGothic' font-size='16' x='4' y='15'%3E%3Ctspan font-family='Noto Sans KR' fill='%23FFEBB6'%3E≫%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A")
          no-repeat center / 100%;
}
.is-online .page-links-list a:hover {
     transform: translateY(-5px);
     filter: drop-shadow(1px 2px 10px #6c6c6c);
}

@media all and (max-width: 1100px) {
     .list-tab-section .list-tab-wrap {
          flex-basis: calc(50% - 10px);
     }
     .list-tab-section > div {
          gap: 40px 20px;
     }
     .list-tab-wrap .tab-nav {
          padding-left: 0;
     }
     .list-tab-wrap .tab {
          padding: 0 5px;
          font-size: 15px;
          letter-spacing: -1.5px;
     }
     .page-links-list {
          flex-wrap: wrap;
     }
     .page-links-list li {
          flex-basis: calc(50% - 6px);
     }
     .page-links-list a {
          align-items: center;
          padding: 20px 20px 20px 110px;
          height: 150px;
          border: 3px solid #dfbf68;
     }
     .page-links-list a::before {
          width: 260px;
          height: 176px;
          background-position: left;
          background-size: 264px 180px;
          transform: translate(-50px, -5px);
     }
     .page-links-list a span {
          font-size: 24px;
     }
}
@media all and (max-width: 900px) {
     section {
          margin: 40px 0;
     }
     .main-visual {
          height: 30vh;
     }
     .list-tab-section .list-tab-wrap {
          flex-basis: 100%;
     }
}
@media all and (max-width: 720px) {
     .main-visual img {
          object-position: 80% 50%;
     }
     .page-links-list a::before {
          transform: translate(-65px, -5px);
     }
}
@media all and (max-width: 640px) {
     .page-links-list a {
          padding-left: 90px;
          height: 110px;
     }
     .page-links-list a::before {
          width: 180px;
          height: 122px;
          background-size: 182px 124px;
          transform: translate(-35px, -1px);
     }
     .page-links-list a span {
          font-size: 20px;
     }
}
@media all and (max-width: 540px) {
     .page-links-list {
          gap: 20px;
     }
     .page-links-list li {
          flex-basis: 100%;
     }
     .page-links-list a {
          padding-left: 50px;
          min-width: 330px;
     }
}
@media all and (max-width: 480px) {
     section {
          --padding: 10px;
     }
     .list-tab-wrap:has(.more-btn) .tab-nav {
          padding-right: 35px;
     }
     .list-tab-wrap .tab {
          padding: 0;
     }
     .list-tab-wrap .tab-con {
          padding: 10px 0;
     }
     .list-tab-wrap .more-btn {
          right: 0;
     }
}