@charset "utf-8";
/* desktop 스타일 */

/* 내용관리 */
#ctt {margin:5vh 0;padding:0 0;background:#fff}
.ctt_admin {text-align:right;position:absolute;top:0px;right:0px;font-size:14px;}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:0px;line-height:1.8em}
.ctt_img {text-align:center}

.drop-group{
    border:2px solid #dedede;
    display:flex;
    flex-direction:column;
    margin:0 0 1rem 0;
    border-radius:8px;
    overflow:hidden;
}

.drop-head:hover,.drop-head.on{
    background-color:#405988;
    color:#ffffff;
    transition:all 0.5s;
}
.drop-head:before{
    content:'\e313';
    display:block;
    position:absolute;
    font-family:'Material Icons';
    right:15px;
    top:50%;
    transform:translateY(-50%) rotateZ(0deg);
    font-size:24px;
}
.drop-head.on:before{
    transform:translateY(-50%) rotateZ(180deg);
}

.drop-group.on,.drop-group:hover{
    border-color:#405988;
}

.drop-head{
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    padding:1em;
    background-color:#ffffff;
    position:relative;
}
.drop-body{
    display:none;
    margin:0;
    flex-direction:column;
    gap:6px;
    padding:2px 8px;
    border-top:1px solid #dedede;
}
.drop-body.on{
    display:flex;
    
}
.drop-body .drop-from-group{
    padding:15px;
    display:flex;
    gap:2em;
    justify-content: space-between;
}

.drop-body .drop-from-group ol{
    list-style:none;
    margin:0;
    padding:0;
}

.drop-body .drop-from-group li{
    font-size:1.125em;
    padding:8px 10px 8px 26px;
    position:relative;
}

.drop-body .drop-from-group ol > li:before{
    content:'';
    position:absolute;
    left:0;
    display:block;
    width:20px;
    height:20px;
    background-color:#405988;
    color:#ffffff;
    border-radius:50%;
    line-height:20px;
    text-align:center;
}

.drop-content > ol > li:nth-of-type(1):before{content:'1';}
.drop-content > ol > li:nth-of-type(2):before{content:'2';}
.drop-content > ol > li:nth-of-type(3):before{content:'3';}
.drop-content > ol > li:nth-of-type(4):before{content:'4';}
.drop-content > ol > li:nth-of-type(5):before{content:'5';}
.drop-content > ol > li:nth-of-type(6):before{content:'6';}
.drop-content > ol > li:nth-of-type(7):before{content:'7';}
.drop-content > ol > li:nth-of-type(8):before{content:'8';}
.drop-content > ol > li:nth-of-type(9):before{content:'9';}

.drop-content:first-child > ol > li:before{
    background-color:#b21023;
}
.drop-content:last-child > ol > li:before{
    background-color:#1748a4;
}

.drop-head > button{
    display:flex;
    flex-direction:column;
    position:relative;
    padding:10px 20px 10px 15px;
    width:100%;
    align-items: flex-start;
    font-weight:500;
    font-size:1.45em;
    background-color:transparent;
    font-family: SCDream4, Sans-Serif;    
    text-align:left;
}

.drop-content{
    flex:1;
}

.drop-content-tit{
    text-align:center;
    font-size:1.125em;
    font-weight:600;
    padding: 8px 10px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #fff;    
}

.drop-content:first-child .drop-content-tit{
    background-color:#fac7cd;
    color:#b21023;
}

.drop-content:last-child .drop-content-tit{
    background-color:#a9c4f3;
    color:#1748a4;
}

@media(max-width:1200px){
    .drop-head > button{
        font-size: 1.1em;
    }
    .drop-content-tit {
        font-size: 1em;
    }
    .drop-body .drop-from-group li {
        font-size: 1em;
        padding: 8px 10px 8px 26px;
        position: relative;
    }
    .drop-from-group{
        flex-direction:column;
    }
}


@media(max-width:640px){
    .drop-head > button{
        font-size: 1em;
    }
    .drop-content-tit {
        font-size: 1em;
    }
    .drop-body .drop-from-group li {
        font-size: 1em;
        padding: 8px 10px 8px 26px;
        position: relative;
    }
    .drop-from-group{
        flex-direction:column;
    }
}