/*
    파일명 : contents.css
    작성자 : 문미영
    작성일 : 2024.02.28
    설  명 : 모든 콘텐츠 페이지별 디자인 스타일 저장
*/
@import url(default.css);
@import url(common.css);
@import url(layout.css);

/* ceo인사말 - 회사소개 */
.cts_greeting {
    margin: 134px 0 275px 0;
    position: relative;
}
.cts_greeting .tit {
    font-size: 25px;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 60px 0;
}
.cts_greeting p {
    margin: 0 600px 0 0;
}
.cts_greeting p strong {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1d;
}
.cts_greeting p strong span {
    color: #F51919;
}
.cts_greeting .ceo {
    position: absolute;
    left: calc(50% + 95px);
    top: -10px;
}
.cts_greeting .ceo .photo {
    position: relative;
    font-size: 0;
    line-height: 0;
}
.cts_greeting .ceo .photo::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
    height: 594px;
    background-color: #F4F4F4;
    border-radius: 300px 0 0 0;
    content: "";
}
.cts_greeting .ceo .photo img {
    position: relative;
}
.cts_greeting .ceo .sign {
    display: flex;
    align-items: flex-start;
    margin: 40px 0 0 0;
}
.cts_greeting .ceo .sign strong {
    display: block;
    margin: 10px 30px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1d;
}
@media screen and (max-width:1320px){
    .cts_greeting p {
        margin: 0 500px 0 0;
    }
    .cts_greeting .ceo {
        position: absolute;
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
    }
    .cts_greeting .ceo .photo img {
        width: 400px;
    }
}
@media screen and (max-width:1024px){
    .cts_greeting .tit br.mno {
        display: none;
    }
    .cts_greeting p {
        margin: 0;
    }
    .cts_greeting .ceo {
        position: relative;
        right: auto;
        bottom: auto;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
    }
    .cts_greeting .ceo .photo {
        height: 300px;
        overflow: hidden;
    }
    .cts_greeting .ceo .photo::before {
        display: none;
    }
    .cts_greeting .ceo .photo img {
        width: 100%;
    }
    .cts_greeting .ceo .sign {
        display: block;
    }
}
@media screen and (max-width:768px){
    
}

/* 연혁 - 회사소개 */
.cts_history {
    margin: 25px 0 60px 0;
}
/*
    <div class="year10 left"></div>
    <div class="year10 right"></div>
    이렇게 두개가 있는 경우 위 left의 하단 여백과 
    right의 상단 여백은 중복해서 들어가지 않고
    둘 중에 제일 큰 여백만 들어간다.
    --- margin은 위아래 여백이 부딪치는 경우 
        둘중에 큰값만 적용됨
*/
.cts_history .year10 {
    margin: 132px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.cts_history .year10.right {
    flex-direction: row-reverse;
}
.cts_history .year_tit {
    width: 408px;
    position: relative; /* p정렬의 기준 */
}
.cts_history .year_tit h2 {
    color: #1d1d1d;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 20px 0;
}
.cts_history .year_tit .photo img {
    border-radius: 20px;
    width: 100%;
}
.cts_history .year_tit p {
    position: absolute;
    left: 18px;
    bottom: 25px;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}
.cts_history .year_cnt {
    width: calc(100% - 517px);
    position: relative; /* before 정렬의 기준 */
}
.cts_history .year_cnt::before {
    position: absolute;
    left: 128px;
    top: 7px;
    width: 1px;
    height: calc(100% - 7px); 
    /* top으로 밀어준 만큼 빼고 선을 그리기 위해
    그냥 100%주면 top으로 밀어준 만큼 하단으로 밀림 */
    background-color: #F51919;
    content: "";
}
.cts_history .right .year_cnt::before {
    left: auto;
    right: 128px;
}
/* 긴 중간선의 마지막 꼬리를 흰색으로 덧칠 */
.cts_history .year_cnt .year1_group:last-child dl dd:last-child {
    position: relative;
}
.cts_history .year_cnt .year1_group:last-child dl dd:last-child::before {
    position: absolute;
    left: -67px;
    bottom: -20px;
    width: 1px;
    height: calc(100% + 6px);
    background-color: #fff;
    content: "";
}
.cts_history .right .year_cnt .year1_group:last-child dl dd:last-child::before {
    left: auto;
    right: -67px;
}

.cts_history .year_cnt .year1_group {
    margin: 0 0 50px 0;
    display: flex;
    justify-content: space-between;
}
/*
    <div class="year_cnt">
        <div class="year1_group"></div>
        <div class="year1_group"></div>   --- last-child로 선택가능
    </div>
*/
.cts_history .year_cnt .year1_group:last-child {
    margin-bottom: 0;
}
.cts_history .right .year_cnt .year1_group {
    flex-direction: row-reverse; /* 콘텐츠 순서 변경 */
}
.cts_history .year_cnt .year1_group h3 {
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    color: #F51919;
    margin-top: -8px;
}
.cts_history .year_cnt .year1_group dl {
    width: calc(100% - 145px);
}
.cts_history .year_cnt .year1_group dl dt {
    float: left;
    /* 뒤에 dd태그는 dt가 없는 것으로 인식 */
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #1d1d1d;
    position: relative; /* before 정렬의 기준 */
}
.cts_history .right .year_cnt .year1_group dl dt {
    float: right;
}
.cts_history .year_cnt .year1_group dl dt::before {
    position: absolute;
    left: -20px ;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #F51919;
    content: "";
}
.cts_history .right .year_cnt .year1_group dl dt::before {
    left: auto;
    right: -20px;
}
.cts_history .year_cnt .year1_group dl dd {
    margin: 0 0 20px 50px;
    /* 왼쪽에 dt가 들어갈 자리를 반드시  margin으로 여백 */  
}
.cts_history .year_cnt .year1_group dl dd.noline::after {
    display: none;
}
.cts_history .right .year_cnt .year1_group dl dd  {
    margin: 0 50px 20px 0;
    text-align: right;
}
/* 만약 dd태그가 두번 연속으로 나오는 경우 두번째 dd의 경우 */
.cts_history .year_cnt .year1_group dl dd + dd {
    margin-top: -12px;
}
@media screen and (max-width:1320px){
    .cts_history .year_tit {
        width: 330px;
    }
    .cts_history .year_tit h2 {
        font-size: 40px;
    }
    .cts_history .year_cnt {
        width: calc(100% - 400px);
    }
    .cts_history .year_cnt::before {
        left: 118px;
    }
    .cts_history .right .year_cnt::before {
        right: 118px;
    }
    .cts_history .year_cnt .year1_group h3 {
        font-size: 30px;
        margin-top: -5px;
    }
    .cts_history .year_cnt .year1_group dl {
        width: calc(100% - 135px);
    }
}
@media screen and (max-width:1024px){
    .cts_history .year10 {
        display: block;
        margin: 70px 0;
    }
    .cts_history .year_tit {
        width: auto;
        width: calc(100% + 40px);
        overflow: hidden;
        padding: 50px 20px 30px 20px;
        margin: 0 0 40px -20px;
    }
    .cts_history .year_tit h2 {
        color: #fff;
    }
    .cts_history .year_tit .photo {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
    .cts_history .year_tit .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    .cts_history .year_tit p {
        position: relative;
        left: auto;
        bottom: 0;
    }
    .cts_history .year_cnt {
        width: auto;
    }
    .cts_history .right .year_cnt::before {
        right: auto;
        left: 118px;
    }
    .cts_history .right .year_cnt .year1_group {
        flex-direction: row;
    }
    .cts_history .right .year_cnt .year1_group dl dt {
        float: left;
    }
    .cts_history .right .year_cnt .year1_group dl dd {
        margin: 0 0 20px 50px;
        text-align: left;
    }
    .cts_history .right .year_cnt .year1_group dl dt::before {
        right: auto;
        left: -20px;
    }
    .cts_history .right .year_cnt .year1_group:last-child dl dd:last-child::before {
        left: -67px;
        right: auto;
    }
}
@media screen and (max-width:768px){
    .cts_history .year_tit h2 {
        font-size: 30px;
    }
    .cts_history .year_tit p {
        font-size: 13px;
    }
    .cts_history .year_cnt::before {
        display: none;
    }
    .cts_history .year_cnt .year1_group {
        display: block;
    }
    .cts_history .year_cnt .year1_group h3 {
        font-size: 20px;
        margin: 0 0 15px 0;
    }
    .cts_history .year_cnt .year1_group dl {
        width: 100%;
        margin-left: 20px;
        position: relative;
    }
    .cts_history .year_cnt .year1_group dl::before {
        position: absolute;
        left: -17px;
        top: 7px;
        width: 1px;
        height: calc(100% - 7px);
        background-color: #F51919;
        content: "";
    }
    .cts_history .year_cnt .year1_group dl dt {
        float: none;
        font-size: 15px;
        margin: 0 0 5px 0; 
    }
    .cts_history .right .year_cnt .year1_group dl dt {
        float: none;
    }
    .cts_history .year_cnt .year1_group dl dd {
        margin-left: 0;
    }
    .cts_history .right .year_cnt .year1_group dl dd {
        margin-left: 0;
    }
    .cts_history .year_cnt .year1_group dl dd:last-child {
        position: relative;
    }
    .cts_history .year_cnt .year1_group dl dd:last-child::after {
        position: absolute;
        left: -17px;
        bottom: 0;
        width: 1px;
        height: calc(100% + 6px);
        background-color: #fff;
        content: "";
    }
}

.cts_ir03 {
    margin: 95px 0 150px 0;
}
.cts_ir03 h2 {
    color: #1d1d1d;
    font-size: 35px;
    font-weight: 700;
}
.cts_ir03 p {
    margin: 10px 0 40px 0;
}
.cts_ir03 .table_wrap {
    overflow-y: auto;
    /* 모바일에서 테이블이 다 안보일때 좌우로 스크롤 */
}
.cts_ir03 .table_wrap table {
    width: 100%;
    border-collapse: collapse;
    /* table 에서만 적용됨
      각 th, td 칸에 border가 들어가 있는데 
      중간 사이가 중복되서 선이 2중으로 보이는걸
      병합해줌  */
    border-top: 5px solid #F51919;
}
.cts_ir03 .table_wrap table caption {
    display: none; /* 숨김 */
}
.cts_ir03 .table_wrap table th,
.cts_ir03 .table_wrap table td {
    border: 1px solid #ccc;
}
.cts_ir03 .table_wrap table th:first-child,
.cts_ir03 .table_wrap table td:first-child {
    border-left: 0;
}
.cts_ir03 .table_wrap table th:last-child,
.cts_ir03 .table_wrap table td:last-child {
    border-right: 0;
}
.cts_ir03 .table_wrap table tbody th,
.cts_ir03 .table_wrap table tbody td {
    padding: 10px 20px;
}
.cts_ir03 .table_wrap table thead th,
.cts_ir03 .table_wrap table thead td {
    background-color: #f4f4f4;
    font-size: 20px;
    font-weight: 700;
    padding: 12px 20px;
}
.cts_ir03 .table_wrap table td {
    text-align: right;
}
.cts_ir03 .table_wrap table th {
    text-align: right;
    font-weight: 700;
}
.cts_ir03 .table_wrap table th:first-child {
    text-align: left;
}

@media screen and (max-width:768px){
    .cts_ir03 {
        margin: 50px 0 70px 0;
    }
    .cts_ir03 h2 {
        font-size: 20px;
    }
    .cts_ir03 .table_wrap table tbody th,
    .cts_ir03 .table_wrap table tbody td {
        padding: 5px 10px;
    }
    .cts_ir03 .table_wrap table thead th,
    .cts_ir03 .table_wrap table thead td {
        font-size: 15px;
        padding: 7px 10px;
    }
}

/* 사업실적검색 - 사업분야 */
.cts_biz05 {
    margin: 100px 0;
}
.cts_biz05 .search_group .search {
    max-width: 844px; /* 최대넓이 */
    width: 100%;
    /* max-width: 844px을 주고 width:100%; 
      넓이가 기본적으로 100%인데(감싸는 영역의 넓이의 100%)
      감싸는 영역이 늘어나서 많이 넓어져서 해당 요소의 넓이도 
      844px이상으로 늘어날 것 같으면 
      그이상은 안늘어나게 하는 코드 max-width */
    height: 89px;
    border: 2px solid #F51919;
    border-radius: 45px;
    margin: 0 auto; 
    /* 넓이가 있는 block요소를 가운데정렬 */
    position: relative;/* before 정렬의 기준 */
    padding: 0 0 0 106px;
    display: flex;
    align-items: center; /* 위아래가운데 */
}
.cts_biz05 .search_group .search:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.cts_biz05 .search_group .search::before {
    position: absolute;
    left: 25px;
    top: 6px;
    font-size: 50px;
    font-weight: 700;
    color: #F51919;
    content: "K";
}
.cts_biz05 .search_group .search label {
    display: none; /* 숨김 */
}
.cts_biz05 .search_group .search input[type="text"] {
    font-size: 25px;
    font-weight: 700;
    color: #1d1d1d;
    width: calc(100% - 106px);
    border: 0;
    outline: 0; /* 입력할때 생기는 테두리 */
}
.cts_biz05 .search_group .search input[type="text"]::placeholder {
    font-weight: 400;
    color: #AAAAAA;
}
.cts_biz05 .search_group .search input[type="submit"] {
    border: 0;
    background-color: transparent;
    font-size: 0;
    line-height: 0;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 39'%3E%3Cpath id='search_FILL0_wght400_GRAD0_opsz24' d='M134.424-811.152a13.924,13.924,0,0,1-10.235-4.188A13.923,13.923,0,0,1,120-825.576a13.923,13.923,0,0,1,4.188-10.235A13.924,13.924,0,0,1,134.424-840a13.924,13.924,0,0,1,10.235,4.188,13.923,13.923,0,0,1,4.188,10.235,13.525,13.525,0,0,1-.777,4.6,13.224,13.224,0,0,1-2.108,3.828l12.427,12.427a2.1,2.1,0,0,1,.61,1.553,2.1,2.1,0,0,1-.61,1.553,2.1,2.1,0,0,1-1.553.61,2.1,2.1,0,0,1-1.553-.61l-12.427-12.427a13.224,13.224,0,0,1-3.828,2.108A13.526,13.526,0,0,1,134.424-811.152Zm0-4.438A9.63,9.63,0,0,0,141.5-818.5a9.63,9.63,0,0,0,2.913-7.073,9.63,9.63,0,0,0-2.913-7.073,9.63,9.63,0,0,0-7.073-2.913,9.63,9.63,0,0,0-7.073,2.913,9.63,9.63,0,0,0-2.913,7.073,9.63,9.63,0,0,0,2.913,7.073A9.63,9.63,0,0,0,134.424-815.59Z' transform='translate(-120 840)' fill='%23f51919'/%3E%3C/svg%3E%0A");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 35px;
}

@media screen and (max-width:1024px){
    .cts_biz05 .search_group .search {
        height: 60px;
        padding: 0 0 0 70px;
    }
    .cts_biz05 .search_group .search::before {
        left: 20px;
        top: 6px;
        font-size: 30px;
    }
    .cts_biz05 .search_group .search input[type="text"] {
        font-size: 15px;
        width: calc(100% - 70px);
    }
    .cts_biz05 .search_group .search input[type="submit"] {
        width: 25px;
        height: 25px;
        margin-left: 20px;
    }
}
.cts_biz05 .login_group {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
}
.cts_biz05 .login_group h2 {
    font-size: 35px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 40px;
}
.cts_biz05 .login_group .login_form {
    border: 2px solid #CCCCCC;
    border-radius: 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
}
.cts_biz05 .login_group .login_form .user_id,
.cts_biz05 .login_group .login_form .user_pw {
    height: 93px;
    display: flex;
    align-items: center; /* 위아래 가운데 */
}
.cts_biz05 .login_group .login_form .user_id {
    border-bottom: 2px solid #CCCCCC;
}
.cts_biz05 .login_group .login_form .user_id label,
.cts_biz05 .login_group .login_form .user_pw label {
    font-size: 0;
    line-height: 0;
    width: 105px;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
.cts_biz05 .login_group .login_form .user_id label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.454 33.506'%3E%3Cpath id='person_FILL0_wght200_GRAD0_opsz24' d='M217.727-729.421a7.316,7.316,0,0,1-5.366-2.232,7.316,7.316,0,0,1-2.232-5.366,7.316,7.316,0,0,1,2.232-5.366,7.316,7.316,0,0,1,5.366-2.232,7.316,7.316,0,0,1,5.366,2.232,7.316,7.316,0,0,1,2.232,5.366,7.316,7.316,0,0,1-2.232,5.366A7.316,7.316,0,0,1,217.727-729.421ZM200-713.74v-1.539a5.182,5.182,0,0,1,.913-2.934,6.129,6.129,0,0,1,2.457-2.121,35.93,35.93,0,0,1,7.174-2.579,30.746,30.746,0,0,1,7.183-.86,30.746,30.746,0,0,1,7.183.86,35.93,35.93,0,0,1,7.174,2.579,6.129,6.129,0,0,1,2.457,2.121,5.182,5.182,0,0,1,.913,2.934v1.539a2.544,2.544,0,0,1-.757,1.873,2.544,2.544,0,0,1-1.873.757H202.63a2.544,2.544,0,0,1-1.873-.757A2.544,2.544,0,0,1,200-713.74Zm2.532.1h30.389v-1.636a2.627,2.627,0,0,0-.543-1.583,4.369,4.369,0,0,0-1.5-1.252,32.14,32.14,0,0,0-6.447-2.321,28.314,28.314,0,0,0-6.7-.806,28.315,28.315,0,0,0-6.7.806,32.139,32.139,0,0,0-6.447,2.321,4.37,4.37,0,0,0-1.5,1.252,2.627,2.627,0,0,0-.543,1.583Zm15.195-18.311a4.877,4.877,0,0,0,3.577-1.488,4.877,4.877,0,0,0,1.488-3.577A4.877,4.877,0,0,0,221.3-740.6a4.877,4.877,0,0,0-3.577-1.488,4.877,4.877,0,0,0-3.577,1.488,4.877,4.877,0,0,0-1.488,3.577,4.877,4.877,0,0,0,1.488,3.577A4.877,4.877,0,0,0,217.727-731.954ZM217.727-737.019ZM217.727-713.642Z' transform='translate(-200 744.616)' fill='%23999'/%3E%3C/svg%3E%0A");
    background-size: 35px auto;
}
.cts_biz05 .login_group .login_form .user_pw label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.223 35'%3E%3Cpath id='lock_FILL0_wght200_GRAD0_opsz24' d='M203.141-805a3.028,3.028,0,0,1-2.223-.918,3.028,3.028,0,0,1-.918-2.223v-17.052a3.028,3.028,0,0,1,.918-2.223,3.028,3.028,0,0,1,2.223-.918h2.692v-3.889a7.5,7.5,0,0,1,2.264-5.514A7.5,7.5,0,0,1,213.611-840a7.5,7.5,0,0,1,5.514,2.264,7.5,7.5,0,0,1,2.264,5.514v3.889h2.692a3.028,3.028,0,0,1,2.223.918,3.028,3.028,0,0,1,.918,2.223v17.052a3.028,3.028,0,0,1-.918,2.223,3.028,3.028,0,0,1-2.223.918Zm0-1.944h20.94a1.165,1.165,0,0,0,.86-.337,1.164,1.164,0,0,0,.337-.86v-17.052a1.165,1.165,0,0,0-.337-.86,1.165,1.165,0,0,0-.86-.337h-20.94a1.165,1.165,0,0,0-.86.337,1.165,1.165,0,0,0-.337.86v17.052a1.164,1.164,0,0,0,.337.86A1.165,1.165,0,0,0,203.141-806.944Zm10.47-6.806a2.818,2.818,0,0,0,2.073-.843,2.818,2.818,0,0,0,.843-2.073,2.818,2.818,0,0,0-.843-2.073,2.818,2.818,0,0,0-2.073-.843,2.818,2.818,0,0,0-2.073.843,2.818,2.818,0,0,0-.843,2.073,2.818,2.818,0,0,0,.843,2.073A2.818,2.818,0,0,0,213.611-813.75Zm-5.833-14.583h11.667v-3.889a5.626,5.626,0,0,0-1.7-4.132,5.626,5.626,0,0,0-4.132-1.7,5.626,5.626,0,0,0-4.132,1.7,5.626,5.626,0,0,0-1.7,4.132Zm-5.833,21.389v0Z' transform='translate(-200 840)' fill='%23999'/%3E%3C/svg%3E%0A");
    background-size: 27px auto;
}
.cts_biz05 .login_group .login_form input {
    width: calc(100% - 150px);
    font-size: 25px;
    font-weight: 700;
    color: #1d1d1d;
    border: 0;
    outline: 0;
}
.cts_biz05 .login_group .login_form input::placeholder {
    font-weight: 400;
    color: #AAAAAA;
}
.cts_biz05 .login_group .login_chk {
    margin: 20px 0 35px 0;
}
.cts_biz05 .login_group .login_chk input {
    display: none;
}
.cts_biz05 .login_group .login_chk label {
    position: relative; /* before정렬의 기준 */
    font-size: 20px;
    color: #666666;
    padding-left: 45px;
}
.cts_biz05 .login_group .login_chk label::before {
    position: absolute;
    left: 12px;
    top: 3px;
    width: 21px;
    height: 21px;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.99 20.99'%3E%3Cpath id='check_circle_FILL0_wght200_GRAD0_opsz24' d='M128.818-826.6l-2.911-2.911a.588.588,0,0,0-.4-.175.545.545,0,0,0-.424.175.573.573,0,0,0-.186.413.573.573,0,0,0,.186.413l3.077,3.077a.9.9,0,0,0,.659.283.9.9,0,0,0,.659-.283l6.387-6.387a.588.588,0,0,0,.175-.4.545.545,0,0,0-.175-.424.572.572,0,0,0-.413-.186.572.572,0,0,0-.413.186Zm1.681,7.589a10.228,10.228,0,0,1-4.093-.826,10.6,10.6,0,0,1-3.334-2.242,10.593,10.593,0,0,1-2.245-3.331A10.207,10.207,0,0,1,120-829.5a10.228,10.228,0,0,1,.826-4.093,10.605,10.605,0,0,1,2.242-3.334,10.593,10.593,0,0,1,3.331-2.245,10.208,10.208,0,0,1,4.091-.827,10.228,10.228,0,0,1,4.093.826,10.6,10.6,0,0,1,3.334,2.242,10.594,10.594,0,0,1,2.245,3.331,10.208,10.208,0,0,1,.827,4.092,10.228,10.228,0,0,1-.826,4.093,10.607,10.607,0,0,1-2.242,3.334,10.6,10.6,0,0,1-3.331,2.245A10.208,10.208,0,0,1,130.5-819.01Zm0-1.166a9,9,0,0,0,6.618-2.711,9,9,0,0,0,2.711-6.618,9,9,0,0,0-2.711-6.618,9,9,0,0,0-6.618-2.711,9,9,0,0,0-6.618,2.711,9,9,0,0,0-2.711,6.618,9,9,0,0,0,2.711,6.618A9,9,0,0,0,130.495-820.176ZM130.495-829.505Z' transform='translate(-120 840)' fill='%23999'/%3E%3C/svg%3E%0A");
}
/*
   <input type="checkbox">
   <label>체크</label>
   checkbox가 클릭되면 input:checked 로 확인 가능 ..
   체크 이후의 디자인은 input:checked 뒤에 나오는 label태그는 
   반드시 코딩 순서가 input label이 나와야함
*/
.cts_biz05 .login_group .login_chk input:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.99 20.99'%3E%3Cpath id='check_circle_FILL1_wght200_GRAD0_opsz24' d='M128.818-826.6l-2.911-2.911a.587.587,0,0,0-.4-.175.545.545,0,0,0-.424.175.573.573,0,0,0-.186.413.572.572,0,0,0,.186.413l3.077,3.077a.9.9,0,0,0,.659.283.9.9,0,0,0,.659-.283l6.387-6.387a.587.587,0,0,0,.175-.4.545.545,0,0,0-.175-.424.572.572,0,0,0-.413-.186.572.572,0,0,0-.413.186Zm1.681,7.589a10.228,10.228,0,0,1-4.093-.826,10.606,10.606,0,0,1-3.334-2.242,10.593,10.593,0,0,1-2.245-3.331A10.207,10.207,0,0,1,120-829.5a10.229,10.229,0,0,1,.826-4.093,10.606,10.606,0,0,1,2.242-3.334,10.6,10.6,0,0,1,3.331-2.245,10.208,10.208,0,0,1,4.091-.827,10.229,10.229,0,0,1,4.093.826,10.606,10.606,0,0,1,3.334,2.242,10.6,10.6,0,0,1,2.245,3.331,10.207,10.207,0,0,1,.827,4.091,10.228,10.228,0,0,1-.826,4.093,10.6,10.6,0,0,1-2.242,3.334,10.594,10.594,0,0,1-3.331,2.245A10.208,10.208,0,0,1,130.5-819.01Z' transform='translate(-120 840)' fill='%23f51919'/%3E%3C/svg%3E%0A");
}
.cts_biz05 .login_group input[type="submit"] {
    width: 100%;
    line-height: 80px;
    background-color: #F51919;
    border-radius: 15px;
    border: 0;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;/* 오버시 마우스 포인터 손가락 */
}
@media screen and (max-width:1024px){
    .cts_biz05 .login_group h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .cts_biz05 .login_group .login_form {
        border-radius: 10px;
    }
    .cts_biz05 .login_group .login_form .user_id,
    .cts_biz05 .login_group .login_form .user_pw {
        height: 60px;
    }
    .cts_biz05 .login_group .login_form .user_id label,
    .cts_biz05 .login_group .login_form .user_pw label {
        width: 60px;
    }
    .cts_biz05 .login_group .login_form .user_id label {
        background-size: 20px auto;
    }
    .cts_biz05 .login_group .login_form .user_pw label {
        background-size: 15px auto;
    }
    .cts_biz05 .login_group .login_form input {
        width: calc(100% - 80px);
        font-size: 17px;
    }
    .cts_biz05 .login_group .login_chk {
        margin: 15px 0 20px 0;
    }
    .cts_biz05 .login_group .login_chk label {
        font-size: 15px;
        padding-left: 30px;
    }
    .cts_biz05 .login_group .login_chk label::before {
        left: 7px;
        top: 2px;
        width: 17px;
        height: 17px;
    }
    .cts_biz05 .login_group input[type="submit"] {
        line-height: 60px;
        border-radius: 7px;
        font-size: 17px;
    }
}

.cts_biz05 .join_group {
    max-width: 600px;
    width: 100%;
    margin: 50px auto;
}
.cts_biz05 .join_group h2 {
    font-size: 35px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 10px;
}
.cts_biz05 .join_group .agree_box {
    width: 100%;
    height: 277px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
}
.cts_biz05 .join_group .agree_box .inner1 {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.cts_biz05 .join_group .agree_box .inner1::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: transparent;
}
.cts_biz05 .join_group .agree_box .inner1::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.cts_biz05 .join_group .agree_box .inner2 {
    white-space: pre-line;
}
.cts_biz05 .join_group .agree_box strong {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1d;
}
.cts_biz05 .join_group .agree_btn {
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0 80px 0;
}
.cts_biz05 .join_group .agree_btn input {
    display: none;/* 숨김 */
}
.cts_biz05 .join_group .agree_btn label {
    padding: 5px 0 5px 35px;
    display: block;
    position: relative; /* before 정렬의 기준 */
    cursor: pointer; /* 마우스를 올릴때 포인트를 손가락으로 */
}
.cts_biz05 .join_group .agree_btn label::before {
    position: absolute;
    left: 5px;
    top: 4px;
    width: 21px;
    height: 21px;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.99 20.99'%3E%3Cpath id='check_circle_FILL0_wght200_GRAD0_opsz24' d='M128.818-826.6l-2.911-2.911a.588.588,0,0,0-.4-.175.545.545,0,0,0-.424.175.573.573,0,0,0-.186.413.573.573,0,0,0,.186.413l3.077,3.077a.9.9,0,0,0,.659.283.9.9,0,0,0,.659-.283l6.387-6.387a.588.588,0,0,0,.175-.4.545.545,0,0,0-.175-.424.572.572,0,0,0-.413-.186.572.572,0,0,0-.413.186Zm1.681,7.589a10.228,10.228,0,0,1-4.093-.826,10.6,10.6,0,0,1-3.334-2.242,10.593,10.593,0,0,1-2.245-3.331A10.207,10.207,0,0,1,120-829.5a10.228,10.228,0,0,1,.826-4.093,10.605,10.605,0,0,1,2.242-3.334,10.593,10.593,0,0,1,3.331-2.245,10.208,10.208,0,0,1,4.091-.827,10.228,10.228,0,0,1,4.093.826,10.6,10.6,0,0,1,3.334,2.242,10.594,10.594,0,0,1,2.245,3.331,10.208,10.208,0,0,1,.827,4.092,10.228,10.228,0,0,1-.826,4.093,10.607,10.607,0,0,1-2.242,3.334,10.6,10.6,0,0,1-3.331,2.245A10.208,10.208,0,0,1,130.5-819.01Zm0-1.166a9,9,0,0,0,6.618-2.711,9,9,0,0,0,2.711-6.618,9,9,0,0,0-2.711-6.618,9,9,0,0,0-6.618-2.711,9,9,0,0,0-6.618,2.711,9,9,0,0,0-2.711,6.618,9,9,0,0,0,2.711,6.618A9,9,0,0,0,130.495-820.176ZM130.495-829.505Z' transform='translate(-120 840)' fill='%23999'/%3E%3C/svg%3E%0A");
}
/* html에서 미리 체크되어 있게 <input type="radio" checked>를 주면 
   css에서는 input:checked 로 선택 */
.cts_biz05 .join_group .agree_btn input:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.99 20.99'%3E%3Cpath id='check_circle_FILL1_wght200_GRAD0_opsz24' d='M128.818-826.6l-2.911-2.911a.587.587,0,0,0-.4-.175.545.545,0,0,0-.424.175.573.573,0,0,0-.186.413.572.572,0,0,0,.186.413l3.077,3.077a.9.9,0,0,0,.659.283.9.9,0,0,0,.659-.283l6.387-6.387a.587.587,0,0,0,.175-.4.545.545,0,0,0-.175-.424.572.572,0,0,0-.413-.186.572.572,0,0,0-.413.186Zm1.681,7.589a10.228,10.228,0,0,1-4.093-.826,10.606,10.606,0,0,1-3.334-2.242,10.593,10.593,0,0,1-2.245-3.331A10.207,10.207,0,0,1,120-829.5a10.229,10.229,0,0,1,.826-4.093,10.606,10.606,0,0,1,2.242-3.334,10.6,10.6,0,0,1,3.331-2.245,10.208,10.208,0,0,1,4.091-.827,10.229,10.229,0,0,1,4.093.826,10.606,10.606,0,0,1,3.334,2.242,10.6,10.6,0,0,1,2.245,3.331,10.207,10.207,0,0,1,.827,4.091,10.228,10.228,0,0,1-.826,4.093,10.6,10.6,0,0,1-2.242,3.334,10.594,10.594,0,0,1-3.331,2.245A10.208,10.208,0,0,1,130.5-819.01Z' transform='translate(-120 840)' fill='%23f51919'/%3E%3C/svg%3E%0A");
}
.cts_biz05 .join_group .info .info_box {
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-bottom: 50px;
}
.cts_biz05 .join_group .info .info_box > div {
    height: 90px;
    display: flex;
    align-items: center; /* 위아래 가운데 */
    border-bottom: 1px solid #ccc;
}
.cts_biz05 .join_group .info .info_box > div:last-child {
    border-bottom: 0;
}
.cts_biz05 .join_group .info .info_box .user_id label, 
.cts_biz05 .join_group .info .info_box .user_pw label,
.cts_biz05 .join_group .info .info_box .user_mail label {
    width: 105px;
    height: 100%;
    font-size: 0;
    line-height: 0;
    background-position: center center;
    background-repeat: no-repeat;
}
.cts_biz05 .join_group .info .info_box .user_id label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.454 33.506'%3E%3Cpath id='person_FILL0_wght200_GRAD0_opsz24' d='M217.727-729.421a7.316,7.316,0,0,1-5.366-2.232,7.316,7.316,0,0,1-2.232-5.366,7.316,7.316,0,0,1,2.232-5.366,7.316,7.316,0,0,1,5.366-2.232,7.316,7.316,0,0,1,5.366,2.232,7.316,7.316,0,0,1,2.232,5.366,7.316,7.316,0,0,1-2.232,5.366A7.316,7.316,0,0,1,217.727-729.421ZM200-713.74v-1.539a5.182,5.182,0,0,1,.913-2.934,6.129,6.129,0,0,1,2.457-2.121,35.93,35.93,0,0,1,7.174-2.579,30.746,30.746,0,0,1,7.183-.86,30.746,30.746,0,0,1,7.183.86,35.93,35.93,0,0,1,7.174,2.579,6.129,6.129,0,0,1,2.457,2.121,5.182,5.182,0,0,1,.913,2.934v1.539a2.544,2.544,0,0,1-.757,1.873,2.544,2.544,0,0,1-1.873.757H202.63a2.544,2.544,0,0,1-1.873-.757A2.544,2.544,0,0,1,200-713.74Zm2.532.1h30.389v-1.636a2.627,2.627,0,0,0-.543-1.583,4.369,4.369,0,0,0-1.5-1.252,32.14,32.14,0,0,0-6.447-2.321,28.314,28.314,0,0,0-6.7-.806,28.315,28.315,0,0,0-6.7.806,32.139,32.139,0,0,0-6.447,2.321,4.37,4.37,0,0,0-1.5,1.252,2.627,2.627,0,0,0-.543,1.583Zm15.195-18.311a4.877,4.877,0,0,0,3.577-1.488,4.877,4.877,0,0,0,1.488-3.577A4.877,4.877,0,0,0,221.3-740.6a4.877,4.877,0,0,0-3.577-1.488,4.877,4.877,0,0,0-3.577,1.488,4.877,4.877,0,0,0-1.488,3.577,4.877,4.877,0,0,0,1.488,3.577A4.877,4.877,0,0,0,217.727-731.954ZM217.727-737.019ZM217.727-713.642Z' transform='translate(-200 744.616)' fill='%23999'/%3E%3C/svg%3E%0A");
    background-size: 35px auto;
}
.cts_biz05 .join_group .info .info_box .user_pw label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.223 35'%3E%3Cpath id='lock_FILL0_wght200_GRAD0_opsz24' d='M203.141-805a3.028,3.028,0,0,1-2.223-.918,3.028,3.028,0,0,1-.918-2.223v-17.052a3.028,3.028,0,0,1,.918-2.223,3.028,3.028,0,0,1,2.223-.918h2.692v-3.889a7.5,7.5,0,0,1,2.264-5.514A7.5,7.5,0,0,1,213.611-840a7.5,7.5,0,0,1,5.514,2.264,7.5,7.5,0,0,1,2.264,5.514v3.889h2.692a3.028,3.028,0,0,1,2.223.918,3.028,3.028,0,0,1,.918,2.223v17.052a3.028,3.028,0,0,1-.918,2.223,3.028,3.028,0,0,1-2.223.918Zm0-1.944h20.94a1.165,1.165,0,0,0,.86-.337,1.164,1.164,0,0,0,.337-.86v-17.052a1.165,1.165,0,0,0-.337-.86,1.165,1.165,0,0,0-.86-.337h-20.94a1.165,1.165,0,0,0-.86.337,1.165,1.165,0,0,0-.337.86v17.052a1.164,1.164,0,0,0,.337.86A1.165,1.165,0,0,0,203.141-806.944Zm10.47-6.806a2.818,2.818,0,0,0,2.073-.843,2.818,2.818,0,0,0,.843-2.073,2.818,2.818,0,0,0-.843-2.073,2.818,2.818,0,0,0-2.073-.843,2.818,2.818,0,0,0-2.073.843,2.818,2.818,0,0,0-.843,2.073,2.818,2.818,0,0,0,.843,2.073A2.818,2.818,0,0,0,213.611-813.75Zm-5.833-14.583h11.667v-3.889a5.626,5.626,0,0,0-1.7-4.132,5.626,5.626,0,0,0-4.132-1.7,5.626,5.626,0,0,0-4.132,1.7,5.626,5.626,0,0,0-1.7,4.132Zm-5.833,21.389v0Z' transform='translate(-200 840)' fill='%23999'/%3E%3C/svg%3E%0A");
    background-size: 27px auto;
}
.cts_biz05 .join_group .info .info_box .user_mail label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.752 24.696'%3E%3Cpath id='mail_FILL0_wght200_GRAD0_opsz24' d='M122.85-735.3a2.76,2.76,0,0,1-2.034-.816,2.76,2.76,0,0,1-.816-2.034v-19a2.76,2.76,0,0,1,.816-2.034A2.76,2.76,0,0,1,122.85-760H148.9a2.76,2.76,0,0,1,2.034.816,2.76,2.76,0,0,1,.816,2.034v19a2.76,2.76,0,0,1-.816,2.034,2.76,2.76,0,0,1-2.034.816Zm27.139-21.372-13.322,8.722a2.691,2.691,0,0,1-.378.165,1.254,1.254,0,0,1-.412.066,1.254,1.254,0,0,1-.412-.066,2.692,2.692,0,0,1-.378-.165l-13.322-8.722v18.522a1.057,1.057,0,0,0,.305.78,1.056,1.056,0,0,0,.78.305H148.9a1.056,1.056,0,0,0,.78-.305,1.056,1.056,0,0,0,.305-.78Zm-14.112,7.26,13.569-8.82H122.307Zm-14.112-7.26v0Z' transform='translate(-120 760)' fill='%23999'/%3E%3C/svg%3E%0A");
    background-size: 32px auto;
}
.cts_biz05 .join_group .info .info_box .user_id input,
.cts_biz05 .join_group .info .info_box .user_pw input {
    width: calc(100% - 150px);
}
.cts_biz05 .join_group .info .info_box input[type="text"],
.cts_biz05 .join_group .info .info_box input[type="password"] {
    font-size: 25px;
    font-weight: 700;
    color: #1d1d1d;
    border: 0;
    outline: 0;
}
.cts_biz05 .join_group .info .info_box input[type="text"]::placeholder,
.cts_biz05 .join_group .info .info_box input[type="password"]::placeholder {
    font-weight: 400;
    color: #aaa;
}
.cts_biz05 .join_group .info .info_box .user_mail input {
    width: calc(100% - 292px);
}
.cts_biz05 .join_group .info .info_box .user_mail select {
    font-size: 25px;
    width: 150px;
    border: 0;
    outline: 0;
}
.cts_biz05 .join_group .info .info_box .user_gender {
    justify-content: center;/* 좌우에 가운데 */
}
.cts_biz05 .join_group .info .info_box .user_gender input {
    display: none; /* 숨김 */
}
.cts_biz05 .join_group .info .info_box .user_gender label {
    width: calc(50% - 38px);
    margin: 0 5px;
    line-height: 48px;
    border: 1px solid #ccc;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 700;
    color: #666;
    text-align: center;
    cursor: pointer;
}
.cts_biz05 .join_group .info .info_box .user_gender input:checked + label {
    border: 2px solid #F51919;
    color: #F51919;
}
.cts_biz05 .join_group .info input[type="submit"] {
    width: calc(100% - 80px);
    margin: 0 40px;
    line-height: 80px;
    background-color: #F51919;
    border-radius: 15px;
    border: 0;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;/* 오버시 마우스 포인터 손가락 */
}

.cts_brochure {
    margin: 90px 0 150px 0;
}
.cts_brochure .board_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 5px solid #F51919;
    padding-bottom: 15px;
}
.cts_brochure .board_head .total_num strong {
    font-weight: 700;
    color: #F51919;
}
.cts_brochure .board_head .search .inner {
    display: flex;
    justify-content: flex-end;
}
.cts_brochure .board_head .search select {
    height: 40px;
    width: 120px;
    padding-left: 10px;
    border: 1px solid #999;
    outline: 0;
    border-radius: 5px;
}
.cts_brochure .board_head .search label {
    display: none;/* 숨김 */
}
.cts_brochure .board_head .search input[type="text"] {
    width: 277px;
    height: 40px;
    border: 1px solid #999;
    border-radius: 5px;
    outline: 0;
    margin: 0 5px;
    padding: 0 10px;
}
.cts_brochure .board_head .search input[type="submit"] {
    width: 77px;
    height: 40px;
    background-color: #3D3D3D;
    color: #fff;
    border-radius: 5px;
}
@media screen and (max-width:1024px){
    .cts_brochure .board_head {
        display: block;
    }
    .cts_brochure .board_head .search {
        margin-top: 5px;
    }
    .cts_brochure .board_head .search .inner2 {
        display: flex;
        justify-content: flex-end;
    }
    .cts_brochure .board_head .search .inner {
        max-width: 478px;
        width: 100%;
    }
    .cts_brochure .board_head .search input[type="text"] {
        width: calc(100% - 145px);
    }
    .cts_brochure .board_head .search select {
        width: 100px;
        height: 30px;
        width: auto;
        padding-left: 5px;
    }
    .cts_brochure .board_head .search input[type="text"] {
        height: 30px;
        padding: 0 5px;
    }
    .cts_brochure .board_head .search input[type="submit"] {
        width: 50px;
        height: 30px;
    }
}

.cts_brochure .board_paging {
    border-top: 1px solid #ccc;
    padding: 27px 0 0 0;
    display: flex;
    justify-content: center; /* 좌우에 가운데 */
    align-items: center; /* 위아래 가운데 */
}
.cts_brochure .board_paging .btn_prev,
.cts_brochure .board_paging .btn_next {
    width: 45px;
    height: 45px;
    font-size: 0;
    line-height: 0;
    border: 1px solid #666;
    border-radius: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px auto;
}
.cts_brochure .board_paging .btn_prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17.949'%3E%3Cpath id='arrow_forward_ios_FILL0_wght200_GRAD0_opsz24' d='M278.717-834.359l-1.025-1.025,7.949-7.949-7.949-7.949,1.025-1.025,8.975,8.975Z' transform='translate(287.692 -834.359) rotate(180)' fill='%23666'/%3E%3C/svg%3E%0A");
    margin-right: 10px;
}
.cts_brochure .board_paging .btn_next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17.949'%3E%3Cpath id='arrow_forward_ios_FILL0_wght200_GRAD0_opsz24' d='M278.717-834.359l-1.025-1.025,7.949-7.949-7.949-7.949,1.025-1.025,8.975,8.975Z' transform='translate(-277.692 852.308)' fill='%23666'/%3E%3C/svg%3E%0A");
    margin-left: 10px;
}
.cts_brochure .board_paging .btn_prev:hover,
.cts_brochure .board_paging .btn_next:hover {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    background-color: #3D3D3D;
}
.cts_brochure .board_paging .btn_prev:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17.949'%3E%3Cpath id='arrow_forward_ios_FILL0_wght200_GRAD0_opsz24' d='M278.717-834.359l-1.025-1.025,7.949-7.949-7.949-7.949,1.025-1.025,8.975,8.975Z' transform='translate(287.692 -834.359) rotate(180)' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.cts_brochure .board_paging .btn_next:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17.949'%3E%3Cpath id='arrow_forward_ios_FILL0_wght200_GRAD0_opsz24' d='M278.717-834.359l-1.025-1.025,7.949-7.949-7.949-7.949,1.025-1.025,8.975,8.975Z' transform='translate(-277.692 852.308)' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.cts_brochure .board_paging .page {
    width: 45px;
    line-height: 45px;
    text-align: center;
    color: #666;
}
.cts_brochure .board_paging .page.on,
.cts_brochure .board_paging .page:hover {
    background-color: #F51919;
    border-radius: 100%;
    color: #fff;
    font-weight: 700;
}
.cts_brochure .board_paging .page:hover {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
}
@media screen and (max-width:1024px){
    .cts_brochure .board_paging .btn_prev,
    .cts_brochure .board_paging .btn_next {
        width: 30px;
        height: 30px;
    }
    .cts_brochure .board_paging .page {
        width: 30px;
        line-height: 30px;
    }
}
.cts_brochure .board_list {
    margin: 45px 0 0 0;
}
.cts_brochure .board_list ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cts_brochure .board_list ul li {
    width: calc(33.33% - 18.66px);
    margin-bottom: 50px;
}
.cts_brochure .board_list ul li a {
    display: block;
}
.cts_brochure .board_list ul li a .photo {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}
.cts_brochure .board_list ul li a .photo img {
    width: 100%;
    /* 반응형에서 이미지 태그를 사용해서 이미지를 삽입
    반드시 width가 필요
    감싸는 요소의 넓이에 %로 들어감.. */
    transition: 0.5s;
}
.cts_brochure .board_list ul li a:hover .photo img {
    transform: scale3d(1.2, 1.2, 1);
}
.cts_brochure .board_list ul li a strong {
    font-size: 20px;
    color: #1d1d1d;
    display: block;
    margin: 10px 0;
    /* 한줄제한 */
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}
.cts_brochure .board_list ul li a .group {
    display: flex;
}
.cts_brochure .board_list ul li a .group span {
    color: #666;
    padding-left: 25px;
    position: relative; /* before 기준 */
    margin-right: 30px;
}
.cts_brochure .board_list ul li a .group span::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 100%;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
}
.cts_brochure .board_list ul li a .group span.count::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13.101'%3E%3Cpath id='visibility_FILL0_wght200_GRAD0_opsz24' d='M93.082-749.767a3.54,3.54,0,0,0,2.607-1.075,3.563,3.563,0,0,0,1.071-2.611,3.54,3.54,0,0,0-1.075-2.607,3.563,3.563,0,0,0-2.611-1.071,3.54,3.54,0,0,0-2.607,1.075,3.563,3.563,0,0,0-1.071,2.611,3.54,3.54,0,0,0,1.075,2.607A3.563,3.563,0,0,0,93.082-749.767Zm0-.961a2.624,2.624,0,0,1-1.927-.794,2.624,2.624,0,0,1-.794-1.927,2.624,2.624,0,0,1,.794-1.927,2.624,2.624,0,0,1,1.927-.794,2.624,2.624,0,0,1,1.927.794,2.624,2.624,0,0,1,.794,1.927A2.624,2.624,0,0,1,95-751.522,2.624,2.624,0,0,1,93.077-750.729Zm0,3.829a10.587,10.587,0,0,1-5.968-1.782,11,11,0,0,1-4.035-4.768,11.007,11.007,0,0,1,4.032-4.768A10.573,10.573,0,0,1,93.074-760a10.587,10.587,0,0,1,5.968,1.782,11,11,0,0,1,4.035,4.768,11.007,11.007,0,0,1-4.032,4.768A10.573,10.573,0,0,1,93.08-746.9ZM93.077-753.45Zm0,5.543a9.619,9.619,0,0,0,5.228-1.5,9.849,9.849,0,0,0,3.641-4.044,9.849,9.849,0,0,0-3.641-4.044,9.619,9.619,0,0,0-5.228-1.5,9.619,9.619,0,0,0-5.228,1.5,9.849,9.849,0,0,0-3.641,4.044,9.849,9.849,0,0,0,3.641,4.044A9.619,9.619,0,0,0,93.077-747.907Z' transform='translate(-83.077 760)' fill='%23666'/%3E%3C/svg%3E%0A");
    background-size: 20px auto;
}
.cts_brochure .board_list ul li a .group span.date::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.498 13.101'%3E%3Cpath id='calendar_month_FILL0_wght200_GRAD0_opsz24' d='M161.161-836.13a1.124,1.124,0,0,1-.828-.332,1.125,1.125,0,0,1-.332-.829v-9.176a1.124,1.124,0,0,1,.332-.828,1.124,1.124,0,0,1,.828-.332h1.271v-1.6h.774v1.6h5.141v-1.6h.719v1.6h1.271a1.124,1.124,0,0,1,.828.332,1.124,1.124,0,0,1,.332.828v9.176a1.125,1.125,0,0,1-.332.829,1.124,1.124,0,0,1-.828.332Zm0-.719h9.176a.423.423,0,0,0,.3-.138.423.423,0,0,0,.138-.3v-6.3h-10.06v6.3a.423.423,0,0,0,.138.3A.423.423,0,0,0,161.161-836.849Zm-.442-7.462h10.06v-2.156a.423.423,0,0,0-.138-.3.423.423,0,0,0-.3-.138h-9.176a.423.423,0,0,0-.3.138.423.423,0,0,0-.138.3Zm0,0v0Zm5.03,3.261a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.531.531,0,0,1,.388-.165.531.531,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,165.749-841.05Zm-2.874,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.531.531,0,0,1,.388-.165.531.531,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,162.874-841.05Zm5.749,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.531.531,0,0,1,.388-.165.531.531,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,168.623-841.05Zm-2.874,2.764a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.53.53,0,0,1,.388-.165.53.53,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,165.749-838.286Zm-2.874,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.53.53,0,0,1,.388-.165.53.53,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,162.874-838.286Zm5.749,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.53.53,0,0,1,.388-.165.53.53,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,168.623-838.286Z' transform='translate(-160 849.231)' fill='%23666'/%3E%3C/svg%3E%0A");
    background-size: 13px auto;
}
@media screen and (max-width:1024px){
    .cts_brochure .board_list ul li {
        width: calc(50% - 10px);
    }
    .cts_brochure .board_list ul li a strong {
        font-size: 17px;
    }
}
@media screen and (max-width:500px){
    .cts_brochure .board_list ul li {
        width: 100%;
    }
    .cts_brochure .board_list ul li a strong {
        font-size: 15px;
    }
}

.cts_brochure_view {
    margin: 100px 0;
}
.cts_brochure_view .view .view_head {
    border-top: 4px solid #F51919;
}
.cts_brochure_view .view .view_head h2 {
    font-size: 35px;
    font-weight: 700;
    color: #1d1d1d;
    margin: 18px 0 10px 0;
}
.cts_brochure_view .view .view_head .info {
    background-color: #f4f4f4;
    padding: 15px 30px;
    display: flex;
    justify-content: flex-end;
}
.cts_brochure_view .view .view_head .info span {
    color: #666;
    padding-left: 25px;
    position: relative; /* before 정렬의 기준 */
    margin-left: 30px;
}
.cts_brochure_view .view .view_head .info span::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 100%;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
}
.cts_brochure_view .view .view_head .info span.writer::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.862 13.1'%3E%3Cpath id='person_FILL0_wght200_GRAD0_opsz24' d='M206.931-738.675a2.861,2.861,0,0,1-2.1-.873,2.861,2.861,0,0,1-.873-2.1,2.86,2.86,0,0,1,.873-2.1,2.861,2.861,0,0,1,2.1-.873,2.861,2.861,0,0,1,2.1.873,2.86,2.86,0,0,1,.873,2.1,2.861,2.861,0,0,1-.873,2.1A2.861,2.861,0,0,1,206.931-738.675ZM200-731.516v-1.63a2.026,2.026,0,0,1,.357-1.147,2.4,2.4,0,0,1,.961-.829,14.038,14.038,0,0,1,2.8-1.008,12.024,12.024,0,0,1,2.809-.336,12.024,12.024,0,0,1,2.809.336,14.038,14.038,0,0,1,2.8,1.008,2.4,2.4,0,0,1,.961.829,2.026,2.026,0,0,1,.357,1.147v1.63Zm.99-.99h11.882v-.64a1.027,1.027,0,0,0-.212-.619,1.708,1.708,0,0,0-.587-.489,12.567,12.567,0,0,0-2.521-.907,11.071,11.071,0,0,0-2.62-.315,11.071,11.071,0,0,0-2.62.315,12.567,12.567,0,0,0-2.521.907,1.708,1.708,0,0,0-.587.489,1.027,1.027,0,0,0-.212.619Zm5.941-7.159a1.907,1.907,0,0,0,1.4-.582,1.907,1.907,0,0,0,.582-1.4,1.907,1.907,0,0,0-.582-1.4,1.907,1.907,0,0,0-1.4-.582,1.907,1.907,0,0,0-1.4.582,1.907,1.907,0,0,0-.582,1.4,1.907,1.907,0,0,0,.582,1.4A1.907,1.907,0,0,0,206.931-739.665ZM206.931-741.646ZM206.931-732.506Z' transform='translate(-200 744.616)' fill='%23666'/%3E%3C/svg%3E%0A");
    background-size: 15px auto;
}
.cts_brochure_view .view .view_head .info span.count::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13.101'%3E%3Cpath id='visibility_FILL0_wght200_GRAD0_opsz24' d='M93.082-749.767a3.54,3.54,0,0,0,2.607-1.075,3.563,3.563,0,0,0,1.071-2.611,3.54,3.54,0,0,0-1.075-2.607,3.563,3.563,0,0,0-2.611-1.071,3.54,3.54,0,0,0-2.607,1.075,3.563,3.563,0,0,0-1.071,2.611,3.54,3.54,0,0,0,1.075,2.607A3.563,3.563,0,0,0,93.082-749.767Zm0-.961a2.624,2.624,0,0,1-1.927-.794,2.624,2.624,0,0,1-.794-1.927,2.624,2.624,0,0,1,.794-1.927,2.624,2.624,0,0,1,1.927-.794,2.624,2.624,0,0,1,1.927.794,2.624,2.624,0,0,1,.794,1.927A2.624,2.624,0,0,1,95-751.522,2.624,2.624,0,0,1,93.077-750.729Zm0,3.829a10.587,10.587,0,0,1-5.968-1.782,11,11,0,0,1-4.035-4.768,11.007,11.007,0,0,1,4.032-4.768A10.573,10.573,0,0,1,93.074-760a10.587,10.587,0,0,1,5.968,1.782,11,11,0,0,1,4.035,4.768,11.007,11.007,0,0,1-4.032,4.768A10.573,10.573,0,0,1,93.08-746.9ZM93.077-753.45Zm0,5.543a9.619,9.619,0,0,0,5.228-1.5,9.849,9.849,0,0,0,3.641-4.044,9.849,9.849,0,0,0-3.641-4.044,9.619,9.619,0,0,0-5.228-1.5,9.619,9.619,0,0,0-5.228,1.5,9.849,9.849,0,0,0-3.641,4.044,9.849,9.849,0,0,0,3.641,4.044A9.619,9.619,0,0,0,93.077-747.907Z' transform='translate(-83.077 760)' fill='%23666'/%3E%3C/svg%3E%0A");
    background-size: 20px auto;
}
.cts_brochure_view .view .view_head .info span.date::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.498 13.101'%3E%3Cpath id='calendar_month_FILL0_wght200_GRAD0_opsz24' d='M161.161-836.13a1.124,1.124,0,0,1-.828-.332,1.125,1.125,0,0,1-.332-.829v-9.176a1.124,1.124,0,0,1,.332-.828,1.124,1.124,0,0,1,.828-.332h1.271v-1.6h.774v1.6h5.141v-1.6h.719v1.6h1.271a1.124,1.124,0,0,1,.828.332,1.124,1.124,0,0,1,.332.828v9.176a1.125,1.125,0,0,1-.332.829,1.124,1.124,0,0,1-.828.332Zm0-.719h9.176a.423.423,0,0,0,.3-.138.423.423,0,0,0,.138-.3v-6.3h-10.06v6.3a.423.423,0,0,0,.138.3A.423.423,0,0,0,161.161-836.849Zm-.442-7.462h10.06v-2.156a.423.423,0,0,0-.138-.3.423.423,0,0,0-.3-.138h-9.176a.423.423,0,0,0-.3.138.423.423,0,0,0-.138.3Zm0,0v0Zm5.03,3.261a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.531.531,0,0,1,.388-.165.531.531,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,165.749-841.05Zm-2.874,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.531.531,0,0,1,.388-.165.531.531,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,162.874-841.05Zm5.749,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.531.531,0,0,1,.388-.165.531.531,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,168.623-841.05Zm-2.874,2.764a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.53.53,0,0,1,.388-.165.53.53,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,165.749-838.286Zm-2.874,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.53.53,0,0,1,.388-.165.53.53,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,162.874-838.286Zm5.749,0a.531.531,0,0,1-.388-.165.531.531,0,0,1-.165-.388.531.531,0,0,1,.165-.388.53.53,0,0,1,.388-.165.53.53,0,0,1,.388.165.531.531,0,0,1,.165.388.531.531,0,0,1-.165.388A.531.531,0,0,1,168.623-838.286Z' transform='translate(-160 849.231)' fill='%23666'/%3E%3C/svg%3E%0A");
    background-size: 13px auto;
}
.cts_brochure_view .view .view_cnt {
    margin: 50px 0;
}
.cts_brochure_view .view .view_cnt .video {
    margin: 0 0 60px 0;
    position: relative; /* iframe 정렬의 기준*/
    overflow: hidden;
    padding: 28% 0;
}
.cts_brochure_view .view .view_cnt .video iframe,
.cts_brochure_view .view .view_cnt .video object,
.cts_brochure_view .view .view_cnt .video embed {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.cts_brochure_view .view .view_foot {
    border-top: 1px solid #ccc;
    padding-top: 20px;
}
.cts_brochure_view .view .view_foot .btn_list {
    width: 88px;
    line-height: 40px;
    background-color: #3D3D3D;
    color: #fff;
    border-radius: 5px;
    display: block;
    padding-left: 42px;
    position: relative; /* before 정렬기준 */
}
.cts_brochure_view .view .view_foot .btn_list::before {
    position: absolute;
    left: 15px;
    top: 14px;
    width: 19px;
    height: 10px;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.434 9.217'%3E%3Cpath id='list_FILL0_wght200_GRAD0_opsz24' d='M164.21-638.715v-1.152h14.224v1.152Zm0,3.9v-1.152h14.224v1.152Zm0,3.9v-1.152h14.224v1.152Zm-3.5-7.666a.676.676,0,0,1-.505-.21.719.719,0,0,1-.2-.521.654.654,0,0,1,.2-.489.7.7,0,0,1,.505-.2.7.7,0,0,1,.505.2.654.654,0,0,1,.2.489.719.719,0,0,1-.2.521A.676.676,0,0,1,160.709-638.582Zm0,3.877a.7.7,0,0,1-.505-.2.654.654,0,0,1-.2-.489.709.709,0,0,1,.2-.533.7.7,0,0,1,.505-.2.7.7,0,0,1,.505.2.709.709,0,0,1,.2.533.654.654,0,0,1-.2.489A.7.7,0,0,1,160.709-634.7Zm0,3.922a.676.676,0,0,1-.505-.21.719.719,0,0,1-.2-.521.654.654,0,0,1,.2-.489.7.7,0,0,1,.505-.2.7.7,0,0,1,.505.2.654.654,0,0,1,.2.489.719.719,0,0,1-.2.521A.676.676,0,0,1,160.709-630.783Z' transform='translate(-160 640)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width:1024px){
    .cts_brochure_view .view .view_head h2 {
        font-size: 30px;
    }
}
@media screen and (max-width:1024px){
    .cts_brochure_view .view .view_head h2 {
        font-size: 25px;
    }
}

@media screen and (max-width:500px){
    .cts_brochure_view .view .view_head h2 {
        font-size: 20px;
    }
    .cts_brochure_view .view .view_head .info {
        justify-content: space-around;
    }
    .cts_brochure_view .view .view_head .info span {
        padding: 25px 0 0 0;
        margin-left: 0;
    }
    .cts_brochure_view .view .view_head .info span::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 15px;
    }
}