/*-----------------------------------------------
    index
-----------------------------------------------*/
/* secCmnIndexTit */
.secCmnIndexTit{
    height: 400px;
    padding-top: 50px;
    background-image: url(../img/column/bgCmnIndexTit.jpg);
}
@media only screen and (max-width:767px){
    .secCmnIndexTit{
        height: 66.67vw;
        padding-top: 33px;
        background-image: url(../img/column/bgCmnIndexTit_sp.jpg);
    }
}

/* secTagList */
.secTagList{
    margin-top: 100px;
}
.secTagList .tagListHead{
    display: flex;
    align-items: center;
    gap: 3px;
}
.secTagList .tagListHead .iconTag{
    flex-shrink: 0;
}
.secTagList .tagListTit{
    font-size: 16px;
    letter-spacing: 0.5px;
}
.secTagList .tagListBody{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}
.secTagList .tagLink{
    height: 35px;
    background: #f8f7f6;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 1px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
}
.secTagList .tagLink.isActive{
    background: #1f1f1f;
    color: #fff;
}
.secTagList .tagLink.isHidden{
    display: none;
}
.secTagList .tagListMore{
    display: none;
    position: relative;
    text-align: center;
    margin-top: 40px;
}
.secTagList .tagListMore.isShow{
    display: block;
}
.secTagList .tagListMore::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #ebebeb;
    z-index: 0;
}
.secTagList .btnTagMore{
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 200px;
    height: 51px;
    padding: 0 30px;
    background: #fff;
    border: solid 1px #ebebeb;
    border-radius: 100px;
    font-size: 14px;
    color: #1f1f1f;
    cursor: pointer;
    transition: opacity 0.2s ease-out;
}
.secTagList .btnTagMore .iconTag{
    flex-shrink: 0;
}
@media only screen and (max-width:767px){
    .secTagList{
        margin-top: 50px;
    }
    .secTagList .tagListHead{
        gap: 5px;
    }
    .secTagList .tagListHead .iconTag{
        width: 14px;
        height: 14px;
    }
    .secTagList .tagListTit{
        font-size: 12px;
        letter-spacing: 0;
    }
    .secTagList .tagListBody{
        gap: 9px 8px;
        margin-top: 19px;
    }
    .secTagList .tagLink{
        height: 28px;
        border-radius: 6px;
        font-size: 12px;
        padding: 0 10px 1px;
    }
    .secTagList .tagListMore{
        margin-top: 20px;
    }
    .secTagList .btnTagMore{
        min-width: 0;
        width: 100%;
        max-width: 155px;
        height: 41px;
        padding: 0 20px;
        font-size: 12px;
        gap: 5px;
    }
    .secTagList .btnTagMore .iconTag{
        width: 12px;
        height: 12px;
    }
}

/* secColumnList */
.secColumnList{
    margin-top: 60px;
}
.secColumnList .columnList{
    display: flex;
    flex-wrap: wrap;
    gap: 60px 45px;
}
.secColumnList .columnItem{
    width: calc((100% - 90px) / 3);
}
.secColumnList .columnInner{
    display: block;
    text-decoration: none;
    color: #1f1f1f;
}
.secColumnList .iconNew{
    position: absolute;
    top: -25px;
    left: 10px;
    z-index: 1;
}
.secColumnList .imgBox{
    position: relative;
    overflow: hidden;
}
.secColumnList .imgBox::after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background: rgba(0, 0, 0, 0.502);
    opacity: 0;
}
.secColumnList .img{
    width: 100%;
    height: 0;
    padding-top: calc(280 / 380 * 100%);
    -webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.secColumnList .hoverTxt{
    font-size: 15px;
    letter-spacing: 0.5px;
    padding-right: 18px;
    position: absolute;
    top: 50%;
    display: block;
    width: 100%;
    color: #fff;
    text-align: center;
    opacity: 0;
    transform: translateY(-120%);
    z-index: 10;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;
    transition-duration: .4s;
}
.secColumnList .subTxt{
    position: relative;
}
.secColumnList .subTxt::after{
    position: absolute;
    content: "";
    width: 14px;
    height: 15px;
    right: -20px;
    top: calc(50% - 7px);
}
.secColumnList .subTxt.lazyloaded::after{
    background: url(../img/column/iconColumnImg.png) center top / cover;
}
.secColumnList .txtBox{
    padding: 20px 0 0;
    transition: opacity 0.2s ease-out;
}
.secColumnList .columnInner:hover .txtBox{
    opacity: 0.6;
}
.secColumnList .txtDate{
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secColumnList .mainTit{
    font-size: 18px;
    line-height: calc(30 / 18);
    letter-spacing: 0.5px;
    font-weight: bold;
    white-space: normal;
    text-overflow: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 60px;
    margin-top: 10px;
}
.secColumnList .tagList{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 11px;
}
.secColumnList .tagItem{
    height: 35px;
    background: #f8f7f6;
    border-radius: 8px;
    font-size: 14px;
    color: #787878;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.secColumnList .columnInner:hover{
    opacity: 1;
}
.secColumnList .columnInner:hover .imgBox::after{
    opacity: 1;
}
.secColumnList .columnInner:hover .img{
    -webkit-transform: scale(1.15);
	transform: scale(1.15);
}
.secColumnList .columnInner:hover .img img{
    -webkit-filter: blur(2px);
    filter: blur(2px);
}
.secColumnList .columnInner:hover .hoverTxt{
    opacity: 1;
    transform: translateY(-50%);
}
@media only screen and (max-width:767px){
    .secColumnList{
        margin-top: 40px;
    }
    .secColumnList .columnList{
        gap: 40px;
    }
    .secColumnList .columnItem{
        width: 100%;
    }
    .secColumnList .iconNew{
        width: 40px;
        height: 40px;
        top: -20px;
        left: -10px;
    }
    .secColumnList .txtBox{
        padding: 19px 0 0;
    }
    .secColumnList .txtDate{
        font-size: 11px;
    }
    .secColumnList .mainTit{
        font-size: 15px;
        line-height: calc(21 / 15);
        letter-spacing: 0;
        max-height: 42px;
        margin-top: 8px;
    }
    .secColumnList .tagList{
        gap: 5px;
        margin-top: 11px;
    }
    .secColumnList .tagItem{
        height: 28px;
        border-radius: 6px;
        font-size: 12px;
        padding: 0 10px;
    }
}

/*-----------------------------------------------
	detail
-----------------------------------------------*/
/* secDetailsTit */
.secDetailsTit{
    max-width: 1860px;
    width: calc(100% - 40px);
    margin: 150px auto 0;
}
.secDetailsTit .tit{
    font-size: 16px;
    letter-spacing: 0.5px;
    padding-left: 20px;
    position: relative;
}
.secDetailsTit .tit::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 11px;
    height: 1px;
    background: #1f1f1f;
}
@media only screen and (max-width:767px){
    .secDetailsTit{
        max-width: unset;
        width: 92%;
        margin: 70px auto 0;
    }
    .secDetailsTit .tit{
        font-size: 11px;
        letter-spacing: 0;
        padding-left: 12px;
    }
    .secDetailsTit .tit::before{
        width: 8px;
    }
}

/* secDetailsTop */
.secDetailsTop{
    margin-top: 80px;
}
.secDetailsTop .txtDate{
    font-size: 14px;
}
.secDetailsTop .mainTit{
    font-size: 28px;
    line-height: calc(40 / 28);
    letter-spacing: 1px;
    font-weight: bold;
    margin-top: 25px;
}
.secDetailsTop .tagList{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 21px;
}
.secDetailsTop .tagItem{
    height: 35px;
    background: #f8f7f6;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.secDetailsTop .imgBox{
    width: 100%;
    height: 0;
    padding-top: calc(600 / 900 * 100%);
    margin-top: 40px;
}
.secDetailsTop .txtAbout{
    font-size: 15px;
    line-height: calc(27 / 15);
    letter-spacing: 0.5px;
    margin-top: 34px;
}
@media only screen and (max-width:767px){
    .secDetailsTop{
        margin-top: 21px;
    }
    .secDetailsTop .txtDate{
        font-size: 11px;
    }
    .secDetailsTop .mainTit{
        font-size: 18px;
        line-height: calc(26 / 18);
        letter-spacing: 0;
        margin-top: 11px;
    }
    .secDetailsTop .tagList{
        gap: 5px;
        margin-top: 11px;
    }
    .secDetailsTop .tagItem{
        height: 28px;
        border-radius: 6px;
        font-size: 12px;
        padding: 0 10px;
    }
    .secDetailsTop .imgBox{
        margin-top: 25px;
    }
    .secDetailsTop .txtAbout{
        font-size: 12px;
        line-height: calc(20 / 12);
        letter-spacing: 0;
        margin-top: 16px;
    }
}

/* secDetailsColumn */
.secDetailsColumn{
    margin-top: 79px;
}
.secDetailsColumn .boxIndex{
    padding: 52px 50px;
    border-radius: 10px;
    background: #f8f7f6;
    position: relative;
}
.secDetailsColumn .boxIndex .boxTit{
    display: flex;
    align-items: center;
    gap: 11px;
    position: absolute;
    top: -13px;
    left: 30px;
}
.secDetailsColumn .boxIndex .boxTit .txt{
    font-size: 14px;
}
.secDetailsColumn .boxIndex .indexList{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.secDetailsColumn .boxIndex .indexLink{
    font-size: 16px;
    line-height: calc(24 / 16);
    font-weight: bold;
    color: #1f1f1f;
    text-decoration: none;
}
.secEntry.entry h2[id^="index-"]{
    scroll-margin-top: 70px;
}
@media only screen and (max-width:767px){
    .secEntry.entry h2[id^="index-"]{
        scroll-margin-top: 67px;
    }
    .secDetailsColumn{
        margin-top: 36px;
    }
    .secDetailsColumn .boxIndex{
        padding: 36px 20px;
        border-radius: 3px;
    }
    .secDetailsColumn .boxIndex .indexTit{
        width: 55px;
    }
    .secDetailsColumn .boxIndex .boxTit{
        gap: 8px;
        top: -9px;
        left: 20px;
    }
    .secDetailsColumn .boxIndex .boxTit .txt{
        font-size: 11px;
    }
    .secDetailsColumn .boxIndex .indexList{
        gap: 13px;
    }
    .secDetailsColumn .boxIndex .indexLink{
        font-size: 12px;
        line-height: calc(18 / 12);
    }
}

/* secEntry */
.secEntry{
    margin-top: 80px;
}
@media only screen and (max-width:767px){
    .secEntry{
        margin-top: 50px;
    }
}

/* cmnDetailsBack */
.cmnDetailsBack{
    margin-top: 120px;
}
.cmnDetailsBack .btnList{
    display: flex;
    color: #1f1f1f;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    padding: 37px 0;
    border: 1px solid #e3e3e3;
    display: flex;
    justify-content: center;
}
.cmnDetailsBack .btnList::before{
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
}
.cmnDetailsBack .btnList.lazyloaded::before{
    background: url(../img/column/imgPager.gif) center top / cover;
}
@media only screen and (max-width:767px){
    .cmnDetailsBack{
        margin-top: 30px;
    }
    .cmnDetailsBack .btnList{
        font-size: 14px;
        padding: 22px 0;
    }
    .cmnDetailsBack .btnList::before{
        margin: 0 8px 0 0;
    }
}

/* secColumnRelated */
.secColumnRelated{
    margin-top: 150px;
}
.secColumnRelated .relatedTit{
    position: relative;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.5px;
    font-weight: bold;
}
.secColumnRelated .relatedTit::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #a7a7a7;
    z-index: 0;
}
.secColumnRelated .relatedTit span{
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 40px;
    background: #fff;
}
.secColumnRelated .secColumnList{
    margin-top: 60px;
}
@media only screen and (max-width:767px){
    .secColumnRelated{
        margin-top: 80px;
    }
    .secColumnRelated .relatedTit{
        font-size: 16px;
        letter-spacing: 0;
    }
    .secColumnRelated .relatedTit span{
        padding: 0 20px;
    }
    .secColumnRelated .secColumnList{
        margin-top: 40px;
    }
}