@charset "UTF-8";

/* .sec-mv */
.sec-mv{
    display: block;
    padding: 60px 20px;
    box-sizing: border-box;
    background:url(../../img/vod/mv.jpg)no-repeat center center / cover;
    text-align: center;
    color: var(--col-white);

    & .sec-mv__ttl{
        line-height: 1.6;
        font-size:38px;
        font-weight: bold;

        & span{
            display: block;
            font-weight: 500;
            font-size: 14px;
        }

        &.sec-mv__ttl--grey{
            & span{
                color: var(--col-grey);
            }
        }
    }
}
#meeting{
    & .sec-mv{
        background:url(../../img/meeting/mv.jpg)no-repeat center center / cover;
    }
}
#database{
    & .sec-mv{
        background:url(../../img/database/mv.jpg)no-repeat center center / cover;
    }
}
#topics{
    & .sec-mv{
        background:url(../../img/topics/mv.jpg)no-repeat center center / cover;
    }

    & .sec-loginLink{
        & .sectionInner{
            padding: 100px 20px;
            text-align: center;

            & p {
                margin-bottom: 40px;
            }

            & .linkBtn{
                & span{
                    padding: 0;

                    &::after{
                        display: none;
                    }
                }
            }
        }
    }
}
#news{
    & .sec-mv{
        background:url(../../img/news/mv.jpg)no-repeat center center / cover;
    }
}


/* .breadCrumb */
.breadCrumb{
    background: var(--col-grey_thin);

    & ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-width: 1240px;
        width: 100%;
        padding: 18px 20px 13px;
        box-sizing: border-box;
        margin: 0 auto;

        & li {
            display: inline-block;
            padding-right: 15px;
            line-height: 1;
            position: relative;
            margin: 0 9px 5px 0;

            &:not(:last-child):after{
                content: '';
                display: block;
                width: 6px;
                height: 100%;
                background: url(../img/icon/arrow-grey.svg)no-repeat center center / contain;
                position: absolute;
                top:2px;
                right: 0;
            }

            &:last-child{
                & a{
                    color: var(--col-grey_bold);
                    pointer-events: none;

                    &:link{
                        color: var(--col-grey_bold);
                    }
                }
            }

            & a{
                display: inline-block;
                line-height: 1;
                font-size: 12px;
                font-weight: 500;
                transition: .3s;

                &:link{
                    color: var(--col-blue);

                    &:hover{
                        text-decoration: underline;
                        color: var(--col-lightBlue);
                    }
                }

                & img{
                    width: 12px;
                    height: auto;
                    margin-right: 8px;
                }
            }
        }
    }
}

/* .sec-search */
.sec-search{
    padding:0 20px;
    position: relative;
    overflow: hidden;
    z-index: 99;

    & .sectionInner{
        display: flex;
        justify-content: flex-start;
        width: 100%;
        max-width: 1240px;
        padding: 100px 0 60px;
        box-sizing: border-box;
        border-bottom: solid 1px #D9D9D9;
        position: relative;
        margin: 0 auto;

        & .sectionTtl{
            width: 300px;
            position: relative;
            z-index: 2;
        }

        & .searchBox{
            width: calc(100% - 300px);
            position: relative;
            z-index: 2;
        }
    }
}

/* .p-searchFilter__table */
.p-searchFilter__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top:none;
    border-left: none;
    font-size: 14px;
    line-height: 1;
    margin: 0;
}
.p-searchFilter__tableTerm {
    width: 160px;
    padding: 20px;
    border-right:none;
    border-bottom: none;
    background: none;
    text-align: left;
    vertical-align: middle;
    line-height: 1;
    font-size: 18px;
    color: var(--col-black);
    font-weight: bold;
}
.p-searchFilter__tableDesc {
    width: calc(100% - 160px);
    padding: 10px 20px;
    border-right:none;
    border-bottom: none;
    vertical-align: middle;
    color: var(--col-blue);
}
.p-searchFilter__tableDescInner {
    display: flex;
}
.p-searchFilter__tableRow{
    border-bottom: 1px solid #CBDCED;
}
.p-searchFilter__modalOpen {
    display: flex;
    padding: 0 0 0 20px;
    font-weight: bold;
    appearance: none;
    white-space: nowrap;
    position: relative;
    margin-right: 20px;
    transition: .3s;

    &:hover{
        opacity: 0.6;
        text-decoration: underline;
    }
}
.p-searchFilter__modalOpen::before {
    content: "";
    display: block;
    width: 13px;
    height: 100%;
    background: url(../img/icon/toggle-on.svg)no-repeat center center / contain;
    position: absolute;
    top:0;
    left: 0;
}
.p-searchFilter__modal {
    padding-bottom: 7rem;
}
.p-searchFilter__modalTitle {
    padding: 20px;
    box-sizing: border-box;
    background: var(--col-blue_thin);
    line-height: 1;
    text-align: left;
    color: var(--col-blue);
    font-size: 20px;
    font-weight: bold;
}
.p-searchFilter__modalInput {
    padding: 20px 0 0;
}
.p-searchFilter__modalResult {
    align-items: center;
    background: rgba(255,255,255,0.8);
    border-radius: 0 0 10px 10px;
    bottom: 0;
    display: flex;
    height: 7rem;
    justify-content: center;
    left: 0;
    position: absolute;
    width: 100%;
}
.p-searchFilter__modalButton {
    display: flex;
    justify-content: center;
    padding: 15px 55px;
    box-sizing: border-box;
    appearance: none;
    background: none;
    border:solid 3px var(--col-blue);
    border-radius: 25px;
    background: var(--col-blue);
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    transition: .3s;

    &:hover{
        background: var(--col-white);
        color: var(--col-blue);
    }
}
.p-searchFilter__checkbox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.p-searchFilter__checkboxItem {
    width: 50%;
    border-bottom: 1px solid #cbdced;
}
.p-searchFilter__checkboxLabel {
    display: block;
    padding: 10px 10px 10px 40px;
    color: var(--col-black);
    font-size: 16px;
    line-height: 1.3;
    position: relative;
    cursor: pointer;
}
.p-searchFilter__checkboxLabel::before {
    content: "";
    display: flex;
    width: 20px;
    height: 20px;
    border: 1px solid #cbdced;
    left: 10px;
    line-height: 1;
    position: absolute;
    top: 10px;
}
.p-searchFilter__checkboxInput:checked + .p-searchFilter__checkboxLabel{
    color: var(--col-blue);
}
.p-searchFilter__checkboxInput:checked + .p-searchFilter__checkboxLabel::before {
    background:url(../img/icon/check.svg)no-repeat center center / contain;
}
.p-searchFilter__input{
    line-height: 1.2;
}
.p-searchFilter__output {
    display: inline-block;
    padding: 0;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 400;
    color: var(--col-black);
}
.p-searchFilter__keyword {
    width: 100%;
    padding: 13px 17px;
    background: #E8F1F5;
    border-radius: 6px;
    font-size: 14px;

    &::placeholder{
        font-weight: bold;
        color: #00479D;
        opacity: .5;
    }
}

.p-searchFilter__submit{
    text-align: center;

    & .linkBtn{
        padding: 15px 55px;
        font-size: 18px;
        margin: 20px auto 0;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

        & span{
            padding: 0;
            &:after{
                display: none;
            }
        }
    }
}
.c-area[data-area=small] {
    max-width:1000px;
    max-height: 70vh;
}
.c-modal {
    height: calc(100vh - 12rem);
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    text-align: center;
    top: 55%;
    transform: translateY(-55%);
    width: 100%;
    z-index: 1000;

    &:before {
        content: "";
        display: block;        
        width: calc(100vw + 240px);
        height: calc(100vh + 240px);
        background: linear-gradient(130deg, var(--col-blue), var(--col-blue_thin));
        opacity: 0;
        pointer-events: none;
        position: fixed;
        top: -120px;
        left: -120px;
        transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 2;
    }
}

.c-modal[data-open=true] {
    opacity: 1;
    pointer-events: auto;

    &:before{
        opacity: 0.85;
        pointer-events: auto;    
    }
}
.c-modal__area {
    align-items: center;
    display: inline-flex;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
}
.c-modal__content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    width: 100%;
}
.c-modal__close {
    display: flex;
    padding: 0;
    appearance: none;
    background: none;
    border: 0;
    font-size: 14px;
    top:15px;
    left: 15px;
    margin: 0;
    position: absolute;
    z-index: 1;
}
.c-modal__close::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/icon/toggle-off.svg)no-repeat center center / contain;
}
.c-modal__contentInner {
    padding: 60px 20px 20px;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 20px 20px rgba(67, 108, 143, 0.5);
    overflow-y: scroll;
}

/* .sec-cardList */
.sec-cardList{
    & .sectionInner{
        max-width:1280px;
        padding:65px 20px 120px;
        margin: 0 auto;
    }
}

/* .cardBox */
.cardBox{
    & .cardBox__list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap:40px;
        margin-bottom: 40px;

        & li{
            width:calc(25% - 30px);
            margin-bottom: 40px;

            & a{
                transition: .3s;
        
                & .postList__img{
                    display: block;
                    margin-bottom: 16px;
                }
            
                & .postList__info{
                    margin-bottom: 15px;
            
                    & p{
                        display: inline-block;
                        padding: 0 20px 0 0;
                        border-right: solid 1px var(--col-black);
                        line-height: 1;
                        font-size: 12px;
                        font-weight: bold;
                        color: var(--col-blue);
            
                        &:last-child{
                            padding: 0 0 0 20px;
                            border-right: none;
                            color: var(--col-grey);
            
                            &:first-child{
                                padding-left: 0;
                            }
                        }
                    }
                }
        
                & .postList__ttl{
                font-size: 18px;
                font-weight: bold;
                }
            }
        }
    }
}


/* .cardBox2 */
.cardBox2{
    & .cardList {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap:24px;

        & li{
            display: flex;
            flex-direction: column;
            width: calc(100% / 3 - 16px);
            margin-bottom: 36px;

            & .cardCnt__img{
                width: 100%;
                height: auto;
            }
            & .cardCnt{
                display: block;
                flex-grow: 1;
                padding: 16px 20px 80px;
                border:solid 1px #E1E1E1;
                box-sizing: border-box;
                position: relative;
                margin-bottom: 10px;

                & .cardCnt__info{
                    line-height: 1.2;
                    font-size: 12px;
                    font-weight: bold;
                    color: var(--col-blue);
                    margin-bottom: 2px;
                    display: inline-block;
    background: #00479D;
    font-size: 12px;
    padding: 5px 10px;
    color: #fff;
                }
                & .cardCnt__ttl{
                    line-height: 1.6;
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                & .cardCnt__txt{
                    line-height: 1.8;
                    font-size: 14px;

                    & a{
                        color: var(--col-blue);
                        text-decoration: underline;
                    }
                }
                & .linkBtn{
                    display: block;
                    width: 200px;
                    max-width: 100%;
                    padding: 7px;
                    font-size: 14px;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 30px;
                    margin: 0 auto;

                    & span{
                        display: block;
                        width: 100%;
                        padding: 0 40px;
                        line-height: 1.2;
                        font-size: 14px;

                        &:after{
                            content: '';
                            display: block;
                            width: 15px;
                            height: 100%;
                            background:url(../img/icon/pdf-white.svg)no-repeat center center / contain;
                            position: absolute;
                            top:0;
                            right: 10px;
                            transition: .3s;
                        }
                    }
                }
            }
            & .cardCnt__date{
                display: block;
                /* text-align: right; */
                line-height: 1.4;
                font-size: 14px;
                /* font-weight:bold; */
                /* color: var(--col-grey_bold); */
                margin-bottom: 8px;
            }
        }
    }
}

/* .postPager */
.postPager{
    & ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap:0;

        & li{
            display: inline-block;
            width:30px;
            height: 30px;
            position: relative;
            margin: 0 5px 5px;

            &.postPager__prev{
                & a{
                    &:before{
                        content:'';
                        display: block;
                        width: 100%;
                        height: 100%;
                        background: url(../img/icon/arrow-prev.svg)no-repeat center center / 5px;
                        position: absolute;
                        transition: .3s;
                    }
                }

                &.postPager__prev--first{
                    & a{
                        &:before{                           
                            background: url(../img/icon/arrow-prev_first.svg)no-repeat center center / 9px;
                        }
                    }
                }
            }

            &.postPager__next{
                & a{
                    &:before{
                        content:'';
                        display: block;
                        width: 100%;
                        height: 100%;
                        background: url(../img/icon/arrow-next.svg)no-repeat center center / 5px;
                        position: absolute;
                        transition: .3s;
                    }
                }
                &.postPager__next--last{
                    & a{
                        &:before{
                            background: url(../img/icon/arrow-next_last.svg)no-repeat center center / 9px;
                        }
                    }
                }
            }

            &.current{
                & a{
                    background: var(--col-blue);
                    border: solid 1px var(--col-blue);
                    color: var(--col-white);
                    opacity: 1;
                    pointer-events: none;
                }
            }

            & a{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                background: var(--col-white);
                border: solid 1px var(--col-grey_thin);
                box-sizing: border-box;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                color: var(--col-blue);
                transition: .3s;
            }
        }
    }
}



/* .sec-postDetail */
.sec-postDetail{

    & .sectionInner{
        max-width: 980px;
        padding:90px 20px 120px;
        margin: 0 auto;
    }
    & .sectionTtl{

        & .sectionTtl__txt{
            font-size: 38px;
            font-weight: bold;
            margin-bottom: 20px;
        }
    }

    & .postInfo{
        margin-bottom: 58px;

        & .postInfo__cat{
            display: inline-block;
            padding:7px 10px;
            background: var(--col-blue);
            line-height: 1;
            font-size: 12px;
            font-weight: bold;
            color: var(--col-white);
            margin-right: 20px;
        }
        & .postInfo__date{
            padding:7px 0;
            line-height: 1;
            font-size: 12px;
            font-weight: bold;
            color: var(--col-grey_bold);
        }
    }

    & .linkBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        & .linkText{
            display: inline-block;
            line-height: 1;
            font-size: 16px;
            font-weight: bold;
            transition: .3s;

            &.linkPrev{
                padding-left: 18px;
                background: url(../img/icon/arrow-prev.svg)no-repeat top 2px left / 8px;
            }

            &.linkNext{
                padding-right: 18px;
                background: url(../img/icon/arrow-next.svg)no-repeat top 2px right / 8px;
            }
        }

        & .linkBtn{
            padding: 11px 60px;
            margin: 0 auto;

            & span{
                padding: 0;

                &::after{
                    display: none;
                }
            }
        }
    }

    & .postLogin{
        position: relative;
        margin-bottom: 80px;

        &::before{
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background: var(--col-black);
            opacity: .9;
            position: absolute;
            top:0;
            left: 0;
        }

        & .p-vodPost__loginBackground{
            width: 100%;
            object-fit: cover;
        }

        & .postLoginbox{
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;

            & .linkBox{
                display: block;
                color: var(--col-white);
            }

            & .linkTxt{
                display: block;
                width: 100%;
                text-align: center;
                margin: 0 auto 40px;
            }

        }
    }
}

.postDetail{
    padding-bottom:60px;
    border-bottom: solid 1px #D9D9D9;
    margin-bottom: 40px;

    &::after{
        content: '';
        display: block;
        clear: both;
    }

    & .postDetail__video {
        width: 100%;
        padding-top: 59.4% ;
        position: relative;
        margin: 0 auto 40px;

      & iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    & .videoInfo{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 80px;
    }

    & h2{
        display: block;
        padding:20px 5px;
        border-top: solid 5px var(--col-blue);
        border-bottom:  solid 1px #D9D9D9;
        box-sizing: border-box;
        line-height: 1.6;
        font-size: 28px;
        font-weight: 500;
        margin:80px auto 30px;
    }
    & h3{
        display: block;
        padding: 8px 15px;
        box-sizing: border-box;
        background: var(--col-blue);
        line-height: 1.4;
        font-size: 18px;
        font-weight: bold;
        color: var(--col-white);
        margin-bottom: 40px;
    }

    & h4{
        display: block;
        padding: 0 0 0 15px;
        border-left: solid 5px var(--col-blue);
        box-sizing: border-box;
        line-height: 1.4;
        font-size: 18px;
        font-weight: bold;
        color: var(--col-black);
        margin-bottom: 20px;
    }

    & a{
        color: var(--col-blue);
        text-decoration: underline;
        transition: .3s;
    }

    & p{
        line-height: 1.8;
        margin-bottom: 40px;
    }

    & ul{
        padding-left: 22px;
        box-sizing: border-box;
        margin-bottom: 50px;

        & li{
            padding-left: 25px;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 3px;

            &:before{
                content:'';
                display: block;
                width: 6px;
                height: 6px;
                background: var(--col-blue);
                border-radius: 25px;
                position: absolute;
                top:10px;
                left: 0;
            }
        }
    }
    & ol{
        padding-left: 22px;
        box-sizing: border-box;
        margin-bottom: 50px;
        counter-reset: number 0;

        & li{
            padding-left: 25px;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 3px;

            &:before{
                counter-increment: number 1;
                content: counter(number) ". ";
                display: block;
                color: var(--col-blue);
                font-weight: bold;
                position: absolute;
                top:0;
                left: 0;
            }
        }
    }
    & table{
        margin-bottom: 80px;
    }

    & blockquote{
        padding: 24px 34px 28px 76px;
        box-sizing: border-box;
        background: #F5F5F5;
        border-left: solid 8px var(--col-lightBlue_thin);
        position: relative;
        margin-bottom: 40px;

        &:before{
            content:'“';
            line-height: 1;
            font-size: 80px;
            color: var(--col-lightBlue_thin);
            position: absolute;
            top:8px;
            left: 17px;
        }

        & p{
            margin-bottom: 0;
        }
        & cite{
            display: block;
            width: 100%;
            text-align: right;
            color: var(--col-grey);
        }
    }

    & .alignleft {
        float: left;
        margin: 7px 24px 7px 0;
    }
    & .alignright {
        float: right;
        margin: 7px 0 7px 24px;
    }
    & .aligncenter {
        clear: both;
        display: block;
        text-align: center;
        margin: 7px auto;
    }    
}


/* .sec-links */
.sec-links{
    margin: 80px auto;

    & ul {
        display: flex;
        justify-content: center;
        gap:5px;

        & li{
            display: inline-block;
            width: 200px;
            background:#F5F5F5;
            text-align: center;
            line-height: 1.6;
            font-size: 16px;
            font-weight: bold;
            color: var(--col-grey_bold);
            transition: .3s;

            &.current{
                background: var(--col-blue);
                color: var(--col-white);
                pointer-events: none;
            }

            & a{
                display: block;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 12px;
                text-align: center;
                transition: .3s;
            }
        }
    }
}


/* .sec-document */
.sec-document{
    padding:0 20px;
    position: relative;
    overflow: hidden;
    z-index: 99;

    & .sectionInner{
        display: flex;
        justify-content: flex-start;
        width: 100%;
        max-width: 1240px;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        margin: 0 auto 100px;

        & .sectionTtl{
            width: 300px;
            padding-right: 50px;
            box-sizing: border-box;
            position: relative;
            z-index: 2;
        }

        & .documentBox{
            width: calc(100% - 300px);
            position: relative;
            z-index: 2;
        }
    }

    & table{
        & tr{
            & th{
                &:nth-child(2){
                    width: 39%;
                }
                &:nth-child(3){
                    width: 7%;
                    min-width: 55px;

                    &.noneLogin{
                        width: 17%;
                    }
                }
                &:nth-child(4){
                    width: 7%;
                    min-width: 55px;
                }
            }
            & td{
                vertical-align: middle;

                &:nth-child(3){
                    padding: 10px;
                    text-align: center;

                    &.noneLogin{
                        & a{
                            color: var(--col-blue);
                            text-decoration: underline;
                        }
                    }
                }

                &:nth-child(4){
                    padding: 10px;
                    text-align: center;
                }
            }
        }
    }
}

/* clm2Box */
.clm2Box{
    display: flex;
    flex-direction: row-reverse;
    max-width: 1280px;
    gap:6%;
    padding: 80px 20px 60px;
    box-sizing: border-box;
    margin: 0 auto;

    & .clm2Main{
        width: 75%;
    }

    & .clm2Side{
        width: 19%;
    }
}

/* .catBox */
.catBox{

    & .catBox__ttl{
        display: block;
        padding: 0 0 18px 28px;
        box-sizing: border-box;
        background: url(../img/icon/list.svg)no-repeat top 6px left / 18px;
        border-bottom: solid 1px var(--col-lightBlue_thin);
        line-height: 1.2;
        font-size: 18px;
        font-weight: bold;
        position: relative;
    }

    & .catBox__links{
        margin-bottom: 40px;

        & li {
            & a {
                display: block;
                padding: 15px 10px;
                box-sizing: border-box;
                border-bottom: solid 1px var(--col-lightBlue_thin);
                line-height: 1.4;
                font-size: 14px;
                position: relative;
                transition: .3s;

                &::after{
                    content: '';
                    display: block;
                    width:12px;
                    height: 100%;
                    background: url(../img/icon/arrow-link.svg)no-repeat center center / contain;
                    position: absolute;
                    top:0;
                    right: 12px;
                    transition: .3s;
                }
            }
        }
    }
    & .catBox__keyword{
        display: flex;

        & input[type="text"]{
            width: calc(100% - 40px);
            height: 40px;
            padding: 11px 7px;
            background: #F5F5F5;
            border:solid 1px #DDDDDD;
            border-right: none;
            box-sizing: border-box;
            line-height: 1.4;
            font-size: 14px;

            &::placeholder{
                color: #CCCCCC;
            }
        }
        & input[type="submit"]{
            display: block;
            width: 40px;
            height: 40px;
            background: url(../img/icon/search.svg)no-repeat center center / 15px;
            background-color: var(--col-blue);
            border:solid 2px var(--col-blue);
            box-sizing: border-box;
            transition: .3s;
        }
    }
}

/* #database */
#database{
    & .postPager{
        margin-bottom: 120px;
    }
}

/* #topics */
#topics{
    & .postPager{
        margin-bottom: 120px;
    }
}
/* #news */
#news{
    & .postPager{
        margin-bottom: 120px;
    }
}

/* .topicsList */
.topicsList{
    & li {
        & a{
            display: flex;
            justify-content: flex-start;
            align-content: flex-start;
            align-items: flex-start;
            padding: 20px 0;
            box-sizing: border-box;
            border-bottom: solid 1px var(--col-grey_thin);
            transition: .3s;

            & .topicsList__date{
                display: flex;
                justify-content: flex-start;
                align-content: center;
                align-items: center;
                font-size: 14px;
            }
            & .topicsList__cat{
                display: inline-block;
                width: 100px;
                padding:5px 5px 6px;
                box-sizing: border-box;
                background: var(--col-blue);
                text-align: center;
                line-height: 1;
                font-size: 12px;
                font-weight: bold;
                color: var(--col-white);
                margin: 0 20px;
            }

            & .topicsList__cat--purple{
                background: #040081;
            }
            & .topicsList__cat--blue{
                background: #00479D;
            }
            & .topicsList__cat--skyblue{
                background: #4F86EC;
            }
            & .topicsList__cat--skyblueThin{
                background: #6FC3DF;
            }
            & .topicsList__cat--border{
                background: none;
                border: solid 1px var(--col-blue);
                color: var(--col-blue);
                font-weight: 400;
            }
            & .topicsList__ttl{
                display: inline-block;
                padding-right: 20px;
                font-size: 14px;
                transition: .3s;

                &:after{
                    content: url(../img/icon/tab-blue.svg);
                    width: 15px;
                    height: 12px;
                    margin-left: 10px;
                }
            }
            & .topicsList__ttl--noneTab{
                padding: 0;

                &:after{
                    display: none;
                }
            }
            &.topicsList__ttl--noneTab{

                & .topicsList__ttl{
                    padding: 0;

                    &:after{
                        display: none;
                    }
                }
            }
        }
    }
}


@media(hover:hover){

    /* .cardBox */
    .cardBox{
        & .cardBox__list{
    
            & li{
    
                & a{
                    &:hover {
                        color: var(--col-blue);
                        opacity: .6;
                    }
                }
            }
        }
    }

    /* .cardBox2 */
    .cardBox2{
        & .cardList {

            & li{
                & .cardCnt{
                    & .linkBtn{
                        &:hover{

                            & span{

                                &:after{
                                    content: '';
                                    background:url(../img/icon/pdf.svg)no-repeat center center / contain;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* .postPager */
    .postPager{
        & ul {

            & li{

                &:hover{

                    &.postPager__prev{
                        & a{
                            &:before{
                                background: url(../img/icon/arrow-prev-white.svg)no-repeat center center / 5px;
                            }
                        }
                        &.postPager__prev--first{
                            & a{
                                &:before{                           
                                    background: url(../img/icon/arrow-prev_first-white.svg)no-repeat center center / 9px;
                                }
                            }
                        }
                    }

                    &.postPager__next{
                        & a{
                            &:before{
                                background: url(../img/icon/arrow-next-white.svg)no-repeat center center / 5px;
                            }
                        }
                        &.postPager__next--last{
                            & a{
                                &:before{
                                    background: url(../img/icon/arrow-next_last-white.svg)no-repeat center center / 9px;
                                }
                            }
                        }
                    }

                    & a{
                        background: var(--col-blue);
                        border: solid 1px var(--col-blue);
                        color: var(--col-white);
                        opacity: 1;
                    }
                }
            }
        }
    }

    /* .postDetail */
    .postDetail{
        & a{
            &:hover{
                opacity: .5;
            }
        }
    }
    
    /* .sec-links */
    .sec-links{
        & ul {
            & li{
                &:hover{
                    background: var(--col-blue);
                    color: var(--col-white);
                }
            }
        }
    }

    /* .sec-document */
    .sec-document{

        & .sectionInner {
            & table{
                & td{
                    & a{
                        transition: .3s;

                        &:hover{
                            opacity: .4;
                        }
                    }
                }
            }
        }
    }

    /* .catBox */
    .catBox{
        & .catBox__links{

            & li {
                & a {
                    &:hover{
                        background: var(--col-blue);
                        color: var(--col-white);
                    }
                }
            }
        }
        & .catBox__keyword{
            & input[type="submit"]{
                &:hover{
                    background: url(../img/icon/search-blue.svg)no-repeat center center / 15px;
                    background-color: var(--col-white);
                }
            }
        }
    }

    /* .topicsList */
    .topicsList{
        & li {
            & a{
                &:hover{

                    & .topicsList__ttl{
                        color: var(--col-blue);
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    /* .sec-postDetail */
    .sec-postDetail{
        & .linkBox{    
            & .linkText{
                &:hover{
                    color: var(--col-blue);
                    text-decoration: underline;
                }
            }
        }
    }

    /* .cardBox2 */
    .cardBox2{
        & .cardList {
            & li{
                & .cardCnt{
                    & .cardCnt__txt{
                        & a{
                            &:hover{
                                opacity: .6;
                            }
                        }
                    }
                }
            }
        }
    }
}


@media (max-width:1280px){
    /* .sec-document */
    .sec-document{

        & table{
            & tr{
                & th{
                    &:nth-child(2){
                        width: 50%;
                    }
                }
            }
        }
    }
}

@media (max-width:1200px){
    /* .sec-document */
    .sec-document{

        & .sectionInner{

            & .sectionTtl{
                width: 250px;
            }

            & .documentBox{
                width: calc(100% - 250px);
                position: relative;
                z-index: 2;
            }
        }

        & table{
            & tr{
                & th{
                    &:nth-child(3){
                        &.noneLogin{
                            width: 17%;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1150px) {

    /* .sec-search */
    .sec-search {
        & .sectionInner {
            & .sectionTtl {
                width: 250px;
            }
        }
    }

    /* .sec-document */
    .sec-document {
        & .sectionInner {

            & table{
                & tr{
                    & th{
                        &:nth-child(2){
                            width: 51%;
                        }
                        &:nth-child(3){
                            &.noneLogin{
                                width: 20%;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:1050px){

    /* .cardBox */
    .cardBox{
        & .cardBox__list {
            & li{
                width:calc(100% / 3 - 30px);
                margin-bottom: 20px;
            }
        }
    }
}

@media(max-width:1000px){

    /* .sec-search */
    .sec-search{
        padding: 0;

        & .sectionInner{
            display: block;
            padding: 50px 30px 40px;

            &:before {
                width: 309px;
                height: 409px;
                top: 70px;
                left: -62px;
                z-index: 1;
            }

            & .sectionTtl{
                width: 100%;
            }

            & .searchBox{
                width: 100%;
            }
        }
    }

    .p-searchFilter__tableTerm{
        width: 100px;
        padding: 10px 0;
        font-size: 16px;
    }

    .p-searchFilter__submit {
        & .linkBtn {
            padding: 11px 37px 13px;
        }
    }

    .p-searchFilter__checkboxItem{
        width: 100%;
    }

    .p-searchFilter__checkboxLabel::before{
        top:11px
    }

    .c-modal{
        width: calc(100% - 40px);
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    /* .sec-document */
    .sec-document{
        padding: 0;

        & .sectionInner{
            display: block;
            padding:0 30px;

            & .sectionTtl{
                width: 100%;
                padding: 0;
            }

            & .documentBox{
                width: 100%;

                & table{
                    width: 750px;

                    & th{
                        font-size: 14px;

                        &:first-child{
                            width: 250px;
                        }

                        &:nth-child(2) {
                            width: 45%;
                        }

                        &:nth-child(3){
                            width: 9%;
                        }
                        &:nth-child(4){
                            width: 9%;
                        }
                    }

                    & td{
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

@media(max-width:950px){
    /* clm2Box */
    .clm2Box{
        display: block;
        gap:0;
        padding: 60px 20px;

        & .clm2Main{
            width:100%;
        }

        & .clm2Side{
            width:100%;
            max-width: 500px;
            margin: 0 auto 80px;
        }
    }
    
    /* .topicsList */
    .topicsList{
        margin-bottom: 60px;
    }

    /* #topics */
    #topics{
        & .postPager{
            &.pc-none{
                display: block;
            }
            &.sp-none{
                display: none;
            }
        }
    }

    /* #news */
    #news{
        & .postPager{
            &.pc-none{
                display: block;
            }
            &.sp-none{
                display: none;
            }
        }
    }

    /* #database */
    #database{
        & .postPager{
            &.pc-none{
                display: block;
            }
            &.sp-none{
                display: none;
            }
        }
    }

}

@media(max-width:768px){

    .sec-mv {
        & .sec-mv__ttl {
            font-size: 30px;
        }
    }

    /* .breadCrumb */
    .breadCrumb{
        & ul{
            padding: 15px 15px 10px;

            & li{
                & a{
                    line-height: 1.4;
                }
            }
        }
    }

    /* .cardBox */
    .cardBox{
        & .cardBox__list {
            gap:0;

            & li{
                width:100%;
                margin-bottom: 40px;
                
                & a{

                    & .postList__img {
                        margin-bottom: 3px;
                    }

                    & .postList__info{
                    margin-bottom: 3px;
            
                        & p{
                            display: inline-block;
                            padding: 0 10px 0 0;
                            font-size: 10px;

                            &:last-child{
                                padding: 0 0 0 10px;

                                &:first-child{
                                    padding: 0 10px 0 0;
                                }
                            }
                        }
                    }
            
                    & .postList__ttl{
                        font-size: 14px;
                    }
                }
            }
        }
    }

    /* .cardBox2 */
    .cardBox2{
        & .cardList {
            gap:20px;
            margin-bottom: 40px;

            & li{
                width: calc(50% - 10px);
                margin-bottom: 20px;

                & .cardCnt{
                    padding: 20px 20px 70px;

                    & .cardCnt__info{
                        margin-bottom: 8px;
                    }
                    & .cardCnt__ttl{
                        font-size: 16px;
                        margin-bottom: 8px;
                    }
                    & .linkBtn{
                        max-width: calc(100% - 40px);
                        padding: 5px;
                        font-size: 13px;
                        bottom: 20px;

                        & span{
                            padding: 0 40px 0 20px;
                        }

                    }
                }
                & .cardCnt__date{
                    font-size: 10px;
                }
            }
        }
    }

    /* .clm2Box */
    .clm2Box {
        & .clm2Side {
            margin-bottom: 0;
        }
    }

    
    /* .topicsList */
    .topicsList{
        & li {
            & a{
                flex-wrap: wrap;

                & .topicsList__ttl{
                    display: block;
                    width: 100%;
                    margin-top: 5px;
                }
            }
        }
    }

    /* .sec-postDetail */
    .sec-postDetail {
        & .sectionInner {
            padding: 40px 20px 60px;
        }

        & .sectionTtl{
            margin-bottom: 0;
            & .sectionTtl__txt{
                font-size: 24px;
            }
        }

        & .postInfo {
            margin-bottom: 40px;
        }

        & .postDetail__video {
            margin-bottom: 20px;
        }

        & .videoInfo {
            font-size: 16px;
            margin-bottom: 40px;
        }

        & h2{
            padding:15px 5px;
            font-size: 24px;
            margin:60px auto 20px;
        }

        & h3{
            font-size: 16px;
            margin-bottom: 20px;
        }

        & h4{
            font-size: 16px;
            margin-bottom: 20px;
        }

        & ul{
            margin-bottom: 40px;

            & li{
                padding-left: 15px;
            }
        }

        & ol{
            margin-bottom: 40px;

            & li{
                padding-left: 20px;
            }
        }

        & table{
            margin-bottom: 40px;
        }

        & blockquote{
            padding: 20px 20px 20px 40px;
            border-left: solid 4px var(--col-lightBlue_thin);
            margin-bottom: 40px;

            &:before {
                font-size: 55px;
                top: 8px;
                left: 5px;
            }
        }

        & .alignleft{
            width: 100%;
            text-align: center;
            float: none;
            margin: 0 auto 10px;
        }
        & .alignright{
            width: 100%;
            text-align: center;
            float: none;
            margin: 0 auto 10px;
        }
        & .aligncenter {
            width: 100%;
            text-align: center;
            float: none;
            margin: 0 auto 10px;
        }
        & .linkBox{    
            & .linkText{
                padding-bottom: 2px;
                line-height: 1.2;
               font-size: 12px;

               &.linkPrev {
                    padding-left: 16px;
                    background: url(../img/icon/arrow-prev.svg) no-repeat top left / contain;
                }
                &.linkNext {
                    padding-right: 16px;
                    background: url(../img/icon/arrow-next.svg) no-repeat top right / contain;
                }
            }

            & .linkBtn{
                padding: 11px 30px;
            }
        }
    }

    /* .sec-links */
    .sec-links{
        margin: 40px auto 80px;

        & ul{
            justify-content: flex-start;
            flex-wrap: wrap;
            max-width: calc(100% - 60px);
            gap:2px;
            margin: 0 auto;

            & li{
                width: calc(100% / 3 - 2px);
            }
        }
    }
}