@charset "utf-8";

.proc {}
ul.proc-hd {
    border-top: 0.5px solid #000000;
}
ul.proc-hd > li {
    font-size: 1.500rem;
    font-weight: 500;
    height: 139px;
    padding: 25px 16px;
    border-bottom: 0.5px solid #000000;
    display: flex;
    gap: 17px;
    line-height: 1;
    cursor: pointer;
}
ul.proc-hd > li .proc-btn {
    width: 23px;
    height: 23px;
    display: block;
    background-image: url(/img/proc/ico-proc-plus.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
ul.proc-hd.open {}
ul.proc-hd.open > li {
    display: none;
}
ul.proc-hd > li:hover,
ul.proc-hd.open > li.open {background-color:#D9D9D9;display: flex;}
ul.proc-hd.open > li.open .proc-btn {
    background-image: url(/img/proc/ico-proc-close.svg);
    background-size: inherit;
}
ul.proc-cont {
}
ul.proc-cont > li {
    display: none;
}
ul.proc-cont > li.open{
    display: block;
}


.proc-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}
ul.proc-ul {
    display: flex;
    height: calc(100vh - 64px - 140px);
    min-height: 623px;
}
li.proc-li {
    min-width: 310px;
    width: 310px;
    position: relative;
}
.proc-subj {
    padding: 24px 22px;
    height: 139px;
    font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 0.5px solid #000000;
    position: relative;
}
li.proc-li:not(:first-child) .proc-subj:after{content:'';position: absolute;height: 37px;width: 0.5px;background: #000000;bottom: 0;left: -1px;transform: translateY(50%);}
.proc-txt {padding-top: 19px;}
.proc-txt:after{content:'';position: relative;display: block;width: 100%;height: 0;padding-bottom: calc(251/310*100%);margin-top: 10px;}

ul.proc-ul2 {}
li.proc-li2 {
    cursor: pointer;
}
li.proc-li2 > .txt-wrap {
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    gap: 16px;
    padding: 0 18px;
    height: 40px;
    align-items: center;
}

li.proc-li2 > .txt-wrap .num {}
li.proc-li2 > .txt-wrap .txt {}
li.proc-li2 > .img-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    padding-bottom: calc(251/310*100%);
    display: none;
}
li.proc-li2 > .img-wrap img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(1);
}
li.proc-li2:hover > .txt-wrap{
    background-color: #000000;
    color: #ffffff;
}
li.proc-li2:hover > .img-wrap{
    display: block;
}
.proc-txt > .txt-wrap {
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8125;
}
.proc-txt > .img-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 33px;
    border-top: 0.5px solid #000000;
}
.proc-txt > .img-wrap img{
    width: 100%;
    height: auto;
}

footer{
    display: none;
}
/***********************************************************************************
mediaquery
************************************************************************************/
@media screen and (max-width: 1200px) {


}
@media screen and (max-width: 768px) {

.proc {}
ul.proc-hd {
}
ul.proc-hd > li {height: 97px;font-size: 1.125rem;font-weight: 400;gap: 10px;padding: 16px 14px;}
ul.proc-hd > li .proc-btn {width: 17px;height: 17px;}
ul.proc-hd.open {}
ul.proc-hd.open > li {
}
ul.proc-hd > li:hover,
ul.proc-hd.open > li.open {}
ul.proc-hd.open > li.open .proc-btn {
}
ul.proc-cont {
}
ul.proc-cont > li {
}
ul.proc-cont > li.open{
}


.proc-wrap {overflow: hidden;}
ul.proc-ul {height: auto;}
li.proc-li {min-width: calc(100% - 1px);}
.proc-subj {height: 97px;padding: 19px 27px;font-size: 1.125rem;font-weight: 400;}
li.proc-li:not(:first-child) .proc-subj:after{}
.proc-txt {
    padding-top: 15.5px;
}
.proc-txt:after{content:'';position: relative;display: block;width: 100%;height: 0;padding-bottom: calc(251/310*100%);margin-top: 10px;}
ul.proc-cont > li:nth-child(2) .proc-txt:after{
    display: none;
}
    ul.proc-ul2 {}
li.proc-li2 {
}
li.proc-li2 > .txt-wrap {font-size: 0.875rem;padding: 0 27px;font-weight: 400;gap: 16px;}
li.proc-li2 > .txt-wrap .num {}
li.proc-li2 > .txt-wrap .txt {}
li.proc-li2 > .img-wrap {}
li.proc-li2 > .img-wrap img {
}
li.proc-li2:hover > .txt-wrap{
}
li.proc-li2:hover > .img-wrap{
}
.proc-txt > .txt-wrap {min-height: 256px;font-size: 0.875rem;padding: 14.5px 26px;}
.proc-txt > .img-wrap {position: relative;border-top: 0;}
.proc-txt > .img-wrap img{
}

    footer{
    display: none;
}

}