.content{position: relative;}
.content::before{position: absolute; width: 100%; height: 190px; background: #F9F5F6; left: 0; top: 0; content: "";}
.content .cenWrap{display: grid; grid-template-columns: 270px auto; gap: 60px; padding: 60px 0;}
.marginT {margin-top: 20px;}
.centerBox{text-align: center;}
.rightBox{text-align: right;}
.leftBox{text-align: left;}

/*왼쪽메뉴*/
.leftMenu{position: relative; z-index: 1;}
.leftMenu h2{background: url(/images/uce/sub/leftMenuBg.png)no-repeat 15px 15px, linear-gradient(270deg, #A93D98 0%, #3221A3 100%); text-align: center; font-size: 34px; color: #FFF; padding: 65px 20px; box-sizing: border-box; border-radius: 30px 30px 0 0; font-weight: 600;}
.leftMenu .accordion{border: 1px solid #eee; padding: 10px 30px 20px 30px; box-sizing: border-box; box-shadow: 5px 5px 7px 1px rgba(221, 221, 221, 0.30); border-radius: 0 0 30px 30px;}
.leftMenu .accordion .depth2{border-bottom: 1px solid #ddd; box-sizing: border-box;}
.leftMenu .accordion .depth2.active, .leftMenu .accordion .depth2:hover{color: #350E6E; font-weight: bold;}
.leftMenu .accordion .depth2:last-child{border-bottom: 0;}
.leftMenu .accordion .depth2 .accorTitle{padding:20px 10px; box-sizing:border-box; display: block;}
.leftMenu .accordion .depth2 .depth3{opacity: 0; height: 0;padding: 0px 20px; font-weight: 300; overflow: hidden; background-color: #F9F5F6; }
.leftMenu .accordion .depth2 .depth3> ul> li> a{display: block;padding:10px;box-sizing: border-box; font-size: 15px; color: #333;}
.leftMenu .accordion .depth2 .depth3> ul> li.active> a, .leftMenu .accordion .depth2 .depth3> ul> li:hover> a{color: #350E6E; font-weight: 600;}
.leftMenu .accordion .depth2 .depth3.show {opacity: 1;height: auto; padding: 10px;}
.leftMenu .accIcon{float: right;width: 12px;height: 12px;display: flex;margin-top: 3px;align-items: center;justify-content: center;}
.leftMenu .accIcon:before, .leftMenu .accIcon:after{content: '';position: absolute;border-radius: 50px;background-color: #52616b;transition: ease 0.3s all;}
.leftMenu .accIcon:before{width: 1px;height: 12px;}
.leftMenu .accIcon:after{width: 12px;height: 1px;}
.leftMenu .accIcon.anime.accIcon:before{transform: rotate(90deg);}

/*타이틀*/
.subContent .titleBox{position: relative;}
.subContent .titleBox h2{font-size: 42px; font-weight: bold; margin-bottom: 40px; line-height: normal;}
.subContent .titleBox ol> li{display: inline-block; position: relative; padding-right: 30px; box-sizing: border-box;}
.subContent .titleBox ol> li:last-child{color: #350E6E; font-weight: bold;}
.subContent .titleBox ol> li::after{content: "▶"; color: #350E6E; padding-left: 30px; box-sizing: border-box;}
.subContent .titleBox ol> li:last-child::after{display: none;}
.subContent .titleBox ol> li img{vertical-align: bottom;}

/*서브내용*/
.subContent .conBox{margin: 80px 0 60px 0; }
.subContent .conBox .textType{margin-bottom: 40px; }
.subContent .conBox .textType h3{font-size: 28px; margin-bottom: 15px; font-weight: 600; padding-left: 30px; background: url(/images/uce/sub/book.svg)no-repeat left center; background-position: left top 1px;}
.subContent .conBox .textType h4{font-size: 22px; margin: 20px 0 10px 0; font-weight: 600; }
.subContent .conBox .textType> ul> li{padding-left: 17px; position: relative; margin-bottom: 5px; line-height: 1.618em;}
.subContent .conBox .textType> ul> li::before{content: ""; width: 5px; height: 5px; background: #A00559; display: block; position: absolute; left: 2px; top: 11px; border-radius: 10px;}
.subContent .conBox .textType> ul> li.liNone::before {content: "※ ";  background: none; top: 0; left: 0;}
.subContent .conBox .textType> ol{margin: 0 0 5px 0;}
.subContent .conBox .textType> ol> li{counter-increment: list-counter; display: list-item; flex-wrap: wrap; position: relative; padding-left: 20px; line-height: 1.618em;}
.subContent .conBox .textType>  ol> li::before{content: counter(list-counter) ". "; position: absolute; left: 0;}
.subContent .conBox .textType .grayBox{background: #f9f9f9; padding: 30px; box-sizing: border-box;}
.subContent .conBox .textType .grayBox.directBox> ul> li{padding-left: 17px; position: relative; margin-bottom: 5px; line-height: 1.618em;}
.subContent .conBox .textType .grayBox.directBox> ul> li::before{content: ""; width: 5px; height: 5px; background: #A00559; display: block; position: absolute; left: 2px; top: 11px; border-radius: 10px;}
.subContent .conBox .textType .grayBox2{border: 10px solid #F9F5F6; padding: 30px; box-sizing: border-box;}
.subContent .conBox .textType .introBox{background: #F9F5F6; padding: 20px; box-sizing: border-box; border-radius: 10px;}
.subContent .conBox .textType .introBox .intro{background: #fff; border-radius: 10px; padding: 30px 30px 30px 150px; box-sizing: border-box; box-shadow: 3px 4px 10px 0px rgba(196, 106, 64, 0.07); position: relative; min-height: 145px;}
.subContent .conBox .textType .introBox .intro::before{content: ""; position: absolute; width: 86px; height: 86px; left: 30px; top: 30px; border-radius: 50%; background-color: #fff !important; box-shadow: 2px 3px 7px 0px rgba(0, 0, 0, 0.06) inset; border: 1px solid #eee; } 
.subContent .conBox .textType .introBox .intro.mutualBox::before{background: url(/images/uce/sub/mutual.svg)no-repeat center; background-size: 50px;}
.subContent .conBox .textType .introBox .intro.smartBox::before{background: url(/images/uce/sub/machine.svg)no-repeat center; background-size: 42px;}
.subContent .conBox .textType .introBox .intro.cnrBox::before{background: url(/images/uce/sub/delivery.svg)no-repeat center; background-size: 42px;}
.subContent .conBox .textType .introBox .intro.cbdBox::before{background: url(/images/uce/sub/deal.svg)no-repeat center; background-size: 46px;}
.subContent .conBox .textType .introBox .intro.rentalBox::before{background: url(/images/uce/sub/rental.svg)no-repeat center; background-size: 46px;}
.subContent .conBox .textType .introBox .intro.fieldBox::before{background: url(/images/uce/sub/wheat.svg)no-repeat center; background-size: 42px;}
.subContent .conBox .textType .introBox .intro.voluBox::before{background: url(/images/uce/sub/volunteering.svg)no-repeat center; background-size: 46px;}
.subContent .conBox .textType .introBox .intro h5{font-size: 20px; color: #000; font-weight: bold; margin-bottom: 10px;}
.subContent .conBox .textType .introBox .intro.return::before{background: url(/images/uce/sub/return.svg)no-repeat center; background-size: 46px;}
.subContent .conBox .textType .introBox .intro p{line-height: 1.618em; color: #333;}
.subContent .conBox a.btnType{display: inline-block; border: 1px solid #ddd; padding: 15px 25px; box-sizing: border-box; border-radius: 7px;}
.subContent .conBox a.btnType01{background: #350E6E; color: #fff;}
.subContent .conBox a.btnType02{border: 1px solid #350E6E; color: #350E6E;}
.subContent .conBox a.btnType03{background: #f9f9f9; color: #555;}
.subContent .conBox a.btnType04{background: #333; color: #fff;}
.subContent .conBox button.subConBtn, .subContent .conBox a.subConBtn{color: #350E6E; padding: 5px 10px; border: 1px solid #350E6E; border-radius: 20px; font-size: 13px;}


/*서브 공통테이블_테이블01*/
.subContent .conBox .TableTypeBox{overflow-x: auto; margin-bottom: 10px;}
.subContent .conBox .TableTypeBox .tableType.tableTypeS{min-width: 800px;}
.subContent .conBox .TableTypeBox .tableType thead tr th, .subContent .conBox .TableTypeBox .tableType thead tr td, .subContent .conBox .TableTypeBox .tableType tbody tr th, .subContent .conBox .TableTypeBox .tableType tbody tr td{border-right: 1px solid #ddd; line-height: 1.618em; vertical-align: middle; padding: 15px !important; line-height: 22px;}
.subContent .conBox .TableTypeBox .tableType thead tr th:last-child, .subContent .conBox .TableTypeBox .tableType thead tr td:last-child, .subContent .conBox .TableTypeBox .tableType tbody tr th:last-child, .subContent .conBox .TableTypeBox .tableType tbody tr td:last-child{border-right: 0;}
.borleft {border-left: 1px solid #ddd;}/*셀 병합 이슈로 추가*/
/*테이블02*/
.subContent .conBox .TableTypeBox .tableType02 tbody tr th, .subContent .conBox .TableTypeBox .tableType02 tbody tr td{text-align: left;}
.subContent .conBox .TableTypeBox .tableType02 tbody tr td{padding: 10px;}
.subContent .conBox .TableTypeBox .ment{font-size: 13px; color: #555; margin-top: 5px; line-height: 22px;}
.subContent .conBox .TableTypeBox button{background: #333; color: #fff; padding: 10px; box-sizing: border-box; font-size: 15px; border: 1px solid #333;}
.subContent .conBox .TableTypeBox label{vertical-align: text-top;}
.borderR{border-right: 1px solid #ddd !important;}
.tc{background: #FDFBE5;}
.thment {font-size: 12px; display: block;}/*th 주의사항*/
/*테이블03*/
.textType7 .tableType02 {margin-top: 0; border-top: 0;}
.textType7 .tableView {margin-bottom: 0;}

/*form 기본값*/
.conBox input{border: 1px solid #ddd; padding: 10px; box-sizing: border-box; font-size: 17px; margin: 3px 0; font-size: 15px; vertical-align: middle;}
.conBox label{font-size: 15px; margin-right: 5px;}
.conBox input[readonly]{background-color: #f9f9f9 !important;}
.conBox input[readonly]:focus{outline:none}
.conBox input[type="date"]{border: 1px solid #ddd; padding: 10px; box-sizing: border-box; font-size: 17px; margin: 3px 0; width: 200px;}
.conBox input[type="radio"], .conBox input[type="checkbox"]{accent-color: #A00559;}
.conBox input[type="radio"]:disabled{accent-color: #555;}
.conBox input.textType1{width: 100px;}
.conBox input.textType2{width: 120px;}
.conBox input.textType3{width: 200px;}
.conBox input.textType4{width: 400px;}
.conBox input.textType5{width: 600px;}
.conBox input.textType6{width: 100%;}
.conBox select{border: 1px solid #ddd; padding: 10px; box-sizing: border-box; background: url(/images/uce/common/select.png)no-repeat right 10px center; font-size: 15px; margin: 3px 0; vertical-align: bottom;}
.conBox select.selectType1{width: 100px;}
.conBox select.selectType2{width: 147.7px;}
.conBox select.selectType3{width: 200px;}
.conBox select.selectType4{width: 224px;}
.conBox select.selectType5{width: 300px;}
button.check{background: #333; color: #fff; font-size: 15px; padding: 13px; box-sizing: border-box; font-weight: 600; vertical-align: middle;}
.mark{border-radius: 20px; width: 16px; height: 16px; display: inline-flex; justify-content: center; align-items: center; font-size: 11px; vertical-align: 1px; font-weight: 700; background: #A00559; color: #fff;}
.textareaS {max-height: 140px; overflow-y: auto; border:1px solid #ddd; padding: 15px 20px; margin:12px 0; line-height: 1.8rem;}
.textareaS table{font-size: 15px;}
.textareaS table thead tr th, .textareaS table thead tr td, .textareaS table tbody tr th, .textareaS table tbody tr td{padding: 5px !important;}
.textareaS> ol> li{font-size: 15px; color: #555; margin-bottom: 0 !important; position: relative; padding-left: 10px; line-height: 24px;}
.textareaS> ol> li::before{content: ""; width: 2px; height: 2px; border-radius: 10px; background: #000; position: absolute; left: 0; top: 10px;}
.textareaS2 {max-height: 500px; }
.conBox textarea.textareaBox01{width: 100%; min-height: 300px; padding: 10px; border: 1px solid #ddd; white-space: pre-wrap;}

/*탭메뉴*/
.subTabList ul{position:relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 40px;}
.subTabList ul li{border: 1px solid #ddd; border-left: 0;}
.subTabList ul li:first-child {border-left: 1px solid #ddd;}
.subTabList ul li:last-of-type{border-right: 1px solid #ddd;}
.subTabList ul li a{text-align: center; display: block; padding: 15px 10px; box-sizing: border-box;}
.subTabList ul li.active, .subTabList ul li:hover {background-color: #350E6E; color: #fff;}
/*탭2*/
.subTabList2 ul{grid-template-columns: repeat(2, 1fr);}
/*탭3*/
.subTabList3 ul{grid-template-columns: repeat(3, 1fr);}
.subTabList3 ul li:nth-child(4) {border-left: 1px solid #ddd;}
.subTabList3 ul li:nth-child(n+4) {border-top: none;}  
/*탭4*/
.subTabList4 ul {grid-template-columns: repeat(4, 1fr);}
.subTabList4 ul li:nth-child(5) {border-left: 1px solid #ddd;}
.subTabList4 ul li:nth-child(n+5) {border-top: none;}  
/*탭4*/
.subTabList5 ul {grid-template-columns: repeat(5, 1fr);}
/*탭7*/
.subTabList7 ul {grid-template-columns: repeat(7, 1fr);}

/*모달팝업*/
.modal {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: 80%; max-width: 900px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px 30px;}
.modal-content {text-align: left;}
.close-modal {position: absolute; top: 20px; right: 30px; font-size: 20px; cursor: pointer; color: #999;}
.modal-content h4 {margin-top: 0;}
.modal.active {display: block;}
.modal-backdrop {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999;}
.modal-backdrop.active {display: block;}

/*텅빈화면*/
.emptyD {width: 100%; text-align: center; padding: 24px 0 40px; border-top: 2px solid #000;}
.emptyD img {width: 80px; display: block; margin:24px auto;}

/*안내페이지 바로가기*/
.arrow-container {display: inline-block; background: #f8f6ff; border-radius: 8px; padding: 12px 20px; margin-bottom: 24px; }
.infopagego {color: #350E6E; font-weight: 600; }
.infopagego img {width: 24px; display: inline-block; margin-right: 4px;}
.arrow-container {display: flex; justify-content: center; align-items: center; gap: 5px;}
.arrow-container .arrow {font-size: 24px; opacity: 0; animation: arrowAnimation 3s infinite; color: #350E6E;}

.arrow-container .arrow:nth-child(1) {animation-delay: 0s;}
.arrow-container .arrow:nth-child(2) {animation-delay: 1s;}

/*로그인하러가기버튼*/
.yalogin {border:1px solid #ddd; border-radius: 4px; display: inline-block; padding: 12px 20px;}

@keyframes arrowAnimation {
    0% {
        opacity: 0; /* 시작 시 숨김 */
        transform: translateX(-10px); /* 왼쪽에서 시작 */
    }
    50% {
        opacity: 1; /* 중간에 보임 */
        transform: translateX(0); /* 원래 위치 */
    }
    100% {
        opacity: 0; /* 끝날 때 다시 숨김 */
        transform: translateX(10px); /* 오른쪽으로 이동 후 숨김 */
    }
}


@media all and (min-width:1221px) and (max-width:1560px) {  
    .content .cenWrap{width: calc(100% - 200px); margin: 0 0 0 40px;}

}

@media all and (max-width:1420px) {       
    .content .cenWrap{width: 100%; padding: 50px 0 0 40px; box-sizing: border-box; display: block; margin: 0;}

    /*왼쪽메뉴*/
    .leftMenu{display: none;}

    /*타이틀*/
    .subContent .titleBox{width: calc(100% - 160px);}

    /*서브내용*/
    .subContent .conBox{width: calc(100% - 140px); }
    .subContent .conBox .textType .grayBox.directBox{gap: 20px;}
}
@media all and (max-width:1280px) {      
    
    .subContent .conBox{width: calc(100% - 40px); }
    
}
@media all and (max-width:860px) {  
    .content .cenWrap{width: 100%; padding: 25px; box-sizing: border-box; display: block; margin: 0;}
    .content::before{height: 120px;}

    /*타이틀*/
    .subContent .titleBox{width: 100%;}
    .subContent .titleBox h2{font-size: 26px; margin-bottom: 20px;}
    .subContent .titleBox ol> li{font-size: 13px; padding-right: 15px;}
    .subContent .titleBox ol> li::after{content: "▶"; color: #350E6E; padding-left: 15px; box-sizing: border-box;}
    .subContent .titleBox ol> li img{width: 14px;}

    /*서브내용*/
    .subContent .conBox{margin: 60px 0 40px 0; font-size: 13px; width: 100%;}
    .subContent .conBox .textType h3{font-size: 24px; line-height: 28px;}
    .subContent .conBox .textType> ul> li::before{top: 8px;}
    .subContent .conBox .textType .grayBox.directBox{gap: 20px; padding: 20px;}
    .subContent .conBox .textType .grayBox.directBox .imgBox{width: 70px; height: 70px;}
    .subContent .conBox .textType .grayBox.directBox .imgBox img{width: 34px;}
    .subContent .conBox .textType .grayBox.directBox> ul> li::before{top: 8px;}

    /*서브 공통테이블_테이블01*/
    .subContent .conBox .TableTypeBox .tableType thead tr th, .subContent .conBox .TableTypeBox .tableType thead tr td, .subContent .conBox .TableTypeBox .tableType tbody tr th, .subContent .conBox .TableTypeBox .tableType tbody tr td{font-size: 13px; padding: 4px !important; line-height: 18px;}
    .subContent .conBox .TableTypeBox button{font-size: 11px;}
    /*테이블02*/
    .subContent .conBox .TableTypeBox label{vertical-align: middle;}

    /*form 기본값*/
    .conBox input, .conBox button.check, .conBox select,.conBox label{font-size: 13px;}
    .conBox label{vertical-align: middle;}
    .conBox input.textType1{width: 100px;}
    .conBox input.textType2,input.textType3{width: 140px; font-size: 13px;}
    .conBox input.textType4, input.textType5{width: 100%;}
    .conBox select.selectType1{width: 100px;}
    .conBox select.selectType2, select.selectType3{width: 100%;}
    .textareaS2{max-height: 200px; line-height: 1.6em;}

    /*모달팝업*/
    .modal {padding: 50px 30px 20px 30px;}      

}

@media all and (max-width:660px) {  

    .subContent .conBox .textType .introBox .intro {padding: 120px 30px 30px; text-align: center;}
    .subContent .conBox .textType .introBox .intro::before {left:50%; margin-left: -43px; top: 20px;}

}