@import url("../css/gallery-article.css");
#content {
    padding-top: 107px;
}
#content .inner {
    justify-content: space-between;
}
.sideBar {
    width: 410px;
    min-width: 256px;
    height: 85vh;
    padding-bottom: 50px;
}

.sideBar a {
    display: block;
}
.sideBar .sideTitle {
    font-size: 40px;
    line-height: 1.5;
    margin-bottom: 29px;
}

.sideBar .category {
    margin-top: 101px;
    /* padding-bottom: 45px; */
}
.sideBar .category .sideSubTitle {
    font-size: 25px;
    letter-spacing: 0.7px;
    line-height: 2.16;
    margin-bottom: 23px;
}
.sideBar .category .categoryList {
    font-size: 20px;
    line-height: 1.45;
    padding-top: 20px;
}
.sideBar .category .categoryList li {
    padding-bottom: 17.3px;
    padding-left: 12px;
    margin-right: 48px;
    margin-bottom: 16.5px;
    border-bottom: 1px solid #000000;
}
.sideBar .category .categoryList .linkWrap {
    overflow: hidden;
}
.sideBar .category .categoryList li a {
    position: relative;
    letter-spacing: 2px;
}
.sideBar .category .categoryList li a .linkHover {
    width: 100%;
    display: block;
    overflow: hidden;
    /* text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s;
    color: transparent; */
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}
.columnArea{
    padding-top: 95px;
    padding-right: 58px;
    max-width: 1221px;
    width: 100%;
    margin-left: 50px;
}


.columnList li {
    padding-bottom: 53px;
    border-bottom: 1px solid #707070;
    margin-bottom: 46px;
}
.columnList li:last-child {
    margin-bottom: 0;
}

.columnList li a {
    display: flex;
    padding-right: 51px;
}

.columnList li a .columnImg {
    width: 454px;
    margin-right: 42px;
    height: min-content;
}

.columnList li a .columnImg img {
    width: 100%;
    aspect-ratio: 454 / 254;
    object-fit: cover;
}

.columnList li a .txt {
    width: calc(100% - 502px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.columnList li a .txt .date {
    font-size: 15px;
    margin-top: 3px;

}
.columnList li a .txt .title {
    font-size: 30px;
    letter-spacing: 1.2px;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.columnList li a .txt .title .linkHover {
    width: 100%;
    overflow: hidden;
    /* text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s;
    color: transparent; */
    white-space: nowrap;
}
.columnList li a .txt .text {
    font-size: 18px;
    letter-spacing: 0.7px;
    line-height: 1.944;
    margin-bottom: 1px;
    text-align: justify;
} 
.scroller-status {
    margin-top: 80px;
    font-size: 18px;
    text-align: center;
}
.ftPhoto {
    margin-top: 144px;
}
.pagingNav {
    padding-bottom: 51px;
}
@media(max-width: 1900px) and (min-width:769px) {
    .columnArea {
        padding-right: 0;
        margin-right: 1px;
        width: calc(100% - 306px);
    }
}
@media (max-width: 1680px) and (min-width: 769px) {
    #content .inner {
        padding: 0 40px;
    }
    .sideBar .category .categoryList li {
        margin-right: 30px;
    }
}
@media (max-width: 1440px) {
    .sideBar {
        min-width: 300px;
    }
    .columnArea {
        width: calc(100% - 350px);
    }
    .columnList {
        width: 99%;
        /* margin-left: 50px; */
    }
    .columnList li {
        padding-bottom: 40px;
        margin-bottom: 35px;
    }
    .columnList li a .columnImg {
        max-width: 400px;
        width: 100%;
        margin-right: 30px;
    }
    .columnList li a  {
        padding-right: 15px;
    }
    .columnList li a .txt {
        width: calc(100% - 430px);
    }
    .columnList li a .txt .date {
        margin-bottom: 15px;
    }
    .columnList li a .txt .title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .columnList li a .txt .text {
        line-height: 1.45;
    }
}
@media (max-width: 1200px) {
    .columnList {
        padding-right: 0;
        width: auto;    
        margin-left: 50px;
    }
    .columnList li a {
        flex-direction: column;
    }
    .columnList li a .columnImg {
        max-width: 100%;
    }
    .columnList li a .txt .date {
        margin-top: 10px;
    }
    .columnList li a .txt {
        width: 100%;
    }
}
@media (max-width: 1080px) and (min-width: 769px ) { 
    .sideBar {
        width: 285px;
        min-width: 275px;
    }
}
@media (max-width: 1300px) and (min-width: 769px) { 
    .columnList {
        width: auto;
    }
    .columnList li a .txt {
        width: calc(100% - 430px);
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    #content {
        padding-top: 90px;
    }
    .columnArea {
        margin-left: 0;
        padding-right: 0;
        width: calc(100% - 300px);
    }
    .columnList li a {
        padding-right: 0;
    }
    .columnList li a .columnImg {
        margin-right: 0;
        width: 100%;
    }
    .sideBar .category .categoryList li {
        margin-right: 0;
    }
    .columnList li a .txt {
        width: 100%;
    }
}
@media (min-width: 769px) {
    .sideBar .category .categoryList li a:hover .linkHover{
       /* text-shadow: 0 0 0 #000, 0 1.5em 0 #000; */
        text-decoration: underline 1px;
        text-underline-offset: 3px;
    }
    .columnList li a:hover .txt .title .linkHover {
        /* text-shadow: 0 0 0 #000, 0 1.5em 0 #000; */
         text-decoration: underline 1px;
        text-underline-offset: 3px;
    }
    .columnList li a:hover {
        opacity: 1;
        
    }
    .columnList li a .columnImg {
        overflow: hidden;
    }
    .columnList li a .columnImg img{
        transition: all 0.7s;
    }
    .columnList li a:hover .columnImg img{
        transform: scale(1.08);
    }
    .columnList li .seeMore:hover {
        cursor: pointer;
        text-decoration: underline 1px solid;
        text-underline-offset:  4px;
    }
}

@media (max-width: 768px) {
    #content {
        padding-top: clamp(20px,3.6vw,30px);
    }
    #content .inner {
        padding: 0 10.4%;
    }
    .sideBar {
        width: 100%;
        order: initial;
        height: initial;
        padding: 0 0;
        margin-bottom: clamp(28px,7vw,50px);
    }
    .sideBar.sp {
        margin-top: 50px;
        padding: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .sideBar .sideTxt {
        letter-spacing: 0.2px;
    }
    .columnArea {
        width: 100%;
        margin-left: 0;
        padding: 0 0;
    }
    .columnList {
        margin-left: 0;
        margin-bottom: 30px;
    }
    .columnList li {
        padding-bottom: clamp(34px,8vw,48px);
        margin-bottom: clamp(34px,8vw,48px);
        
    }
    .columnList li a .columnImg {
        max-width: unset;
        width: 100%;
    }
    .columnList li a  {
        padding-right: 0;
    }
    .columnList li a .txt .title {
        -webkit-line-clamp: 2;
        font-size: clamp(20px, 4vw,30px);
        margin-bottom: clamp(13px,2.2vw,26px);
    }
    .columnList li a .txt .title .linkHover {
        -webkit-line-clamp: 2;
        text-shadow: none;
        color: #000;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .columnList li a .txt .text {
        font-size: clamp(14px,2.5vw,18px);
    }
    .columnList li a .txt .date {
        margin-top: clamp(22px,3.6vw,34px);
        font-size: clamp(12px,2.2vw,14px);
        letter-spacing: 0.7px;
        margin-bottom: 12px;
    }
    .sideBar .sideTitle {
       font-size: clamp(20px,3.6vw,30px);
       margin-bottom: clamp(16px,3.6vw,30px);
    }
    
    .sideBar .category {
        height: unset;
        margin-top: 0;
        padding-bottom: 0;
    }
    .sideBar .category .sideSubTitle {
        font-size: clamp(15px,2.8vw,18px);
        padding-left: 5px;
        margin-bottom: clamp(19px,3.4vw,30px);
        line-height: 1.45;
    }
    .sideBar .category .categoryList {
        font-size: clamp(14px,2.5vw,18px);
        padding-top: 0;
    }
    .sideBar .category .categoryList li {
        margin-right: 0;
        padding-left: 0;
        padding-bottom: clamp(9px,2.2vw,15px);
        margin-bottom: clamp(8px,2vw,14px);
    }
    .sideBar .category .categoryList li a {
        padding: 0 11px
    }
    .ftPhoto {
        margin-top: clamp(44px, 7.6vw, 75px);
    }
    .scroller-status {
        margin-top:  clamp(19px,3.4vw,30px);
        font-size: clamp(12px,2.2vw,14px);
    }
    
    .hamburger span{
        background: #000;
    }
}