@charset "utf-8";
@import url('base.css');
@import url('main.css');


/* 마이페이지 */
.mypageWrap .title { display:inline-block; padding:0 17px 10px;font-size:20px; font-weight:700; border-bottom:1px solid #d6d6d6; box-shadow: 0 2px 0 #efefef;}
.mypageWrap .title span { color:#3774d5}
.mypageWrap ul { margin-top:30px}
.mypageWrap li { display:inline-block; width:130px; margin:0 5px; vertical-align:top;}
.mypageWrap li a { display:inline-block; }
.mypageWrap li a i { display:flex; width:75px; height:75px; margin:0 auto 5px; border-radius: 100%; justify-content: center; align-items: center; background:#b9d8dd}
.mypageWrap li a i:after { content:''; display: block; height:34px; background:url(../../../images/sf/common/icon.png) no-repeat}
.mypageWrap li a i.icon1:after { width:30px; background-position:-66px -176px;}
.mypageWrap li a i.icon2:after { width:34px; background-position:-99px -176px;}
.mypageWrap li a i.icon3:after { width:25px; background-position:-136px -176px;}
.mypageWrap li a i.icon4:after { width:33px; background-position:-164px -176px;}
.mypageWrap li a i.icon5:after { width:25px; background-position:0 -463px;}
.mypageWrap li a:hover i,
.mypageWrap li a:focus i { border:2px solid #147a69; background:#fff}
.mypageWrap .btnLogout { height:35px; padding:0 25px; color:#fff; font-size:15px; background:#0c2e4f}
.mypageWrap .btnClose { position:absolute; top:20px; right:15px; cursor: pointer; width:33px; height:33px; font-size:0; display: flex; justify-content: center; align-items: center; background: transparent;}
.mypageWrap .btnClose:after { content:''; display: block; width:17px; height:17px; background:url(../../../images/sf/common/icon.png) no-repeat -60px -2px}



/* 오류페이지 */
.error_page { position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; text-align: center; background: #e8eff2;}
.error_page:before { content:''; display: block; width:447px; height:365px; margin-bottom:40px; background:url(../../../images/sf/common/imgError.png) no-repeat 0 0}
.error_page p { padding-bottom:30px; font-size:20px; letter-spacing: -1px;}
.error_page p span { display: block; color:#0c2e4f; font-size:45px; font-weight:600}
.error_page p strong { display:block; color:#3774d5; font-weight:600}
.error_page .button { width:140px; padding:0}



/* sub */
.h2Title { font-size: 22px; padding:15px 0; font-weight: 600;}
.h2Title:before { content: ''; display:block; width: 35px; height: 5px; margin-bottom:6px; background:linear-gradient(to right, #39be4a, #23507b);}
.h2Title span { display: inline-block; font-size: 16px; color: #686868; margin-left: 5px;}
.h3Title { padding:10px 0; font-size:20px; font-weight:600; color:#147a69}
.h4Title { margin-bottom:10px; font-size:18px; }
.h4Title:before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; vertical-align:middle; margin-top:-4px; background:#00ad51}


/* table */
.gridDetail{ width: 100%; position: relative}
.gridDetail:before{ content: ''; display: block; width: 100%; height: 1px; background: #353e4d; position: absolute; top: 0; left: 0}
.gridDetail td,
.gridDetail th { padding:15px; border-bottom: 1px solid #dcdcdc; border-left:1px solid #dcdcdc; text-align: center; word-break: break-all;}
.gridDetail td:first-child,
.gridDetail th:first-child { border-left:0}
.gridDetail .lineL { border-left: 1px solid #dcdcdc !important}
.gridDetail thead th {  padding:15px 0; font-weight: 600; word-break: keep-all; background: #f9f9f9}
.gridDetail tbody th { color:#565656; font-weight: 400;}
.gridDetail th label { font-weight: 400;}
.gridDetail th label.necessary{ margin: 0}
.gridDetail label { display: inline-block; text-align: left }
.gridDetail td { color:#565656; background:#fff}
.gridDetail td a { color:#323232; font-weight: 400;}
.gridDetail td a:hover,
.gridDetail td a:focus { text-decoration: underline;}
.gridDetail td.subject { text-align: left; color:#323232; font-weight: 400;}
.gridDetail td.thesis { text-align: left; }
.gridDetail td .button.small { min-width: auto;}
.gridDetail td table{ width: 100%; border:1px solid #dcdcdc}
.gridDetail td table th, .gridDetail td table td{ padding: 5px; text-align:center !important}
.gridDetail td table th{ background: #f8fbfd}
.gridDetail td table th, .gridDetail td table th label{ color: #686868}
.gridDetail td table td.txt_al{ text-align:left !important}
.gridDetail td span.inBlock{ line-height: 30px; margin-right: 10px}
.gridDetail tr.supply td{ background: #117fc3; color: #fff; font-weight: 500}
.gridDetail tr.supply td .button{ background: #485671; border-color: #485671; color: #fff}
.gridDetail td a.lnk{ position: relative; z-index: 1}
.gridDetail td a.lnk:hover{ font-weight: 600; color: #000}
.gridDetail td a.lnk:after{ content: ''; display: block; width: 0; height: 5px; background: #ffc75f; position: absolute; left: 55%; bottom: 3px; -webkit-transition: 0.3s cubic-bezier(0.2, 1, 0.75, 1); transition: 0.3s cubic-bezier(0.2, 1, 0.75, 1); z-index: -1}
.gridDetail td a.lnk:hover:after{ width: 45%}
.gridDetail caption.title { display: table-caption; margin-bottom:1px; padding:10px 0; border-bottom:1px solid #fff; box-shadow: 0 1px 0 #353e4d; color:#fff; font-weight: 300; background: #353e4d;}
.boardList.gridDetail td { vertical-align: middle;}
.gridDetail td .btnPrintWrap { float:right;}

.outGrid{ position: relative;}
.outGrid:after{ content: ''; display: block; clear: both}
.outGrid p.necessary{ margin: -41px 0 10px; font-weight:300; text-align: right}
.outGrid .necessary:before, .necessary:before{ content: '\22C6'; display: inline-block; margin-right: 3px; color: #d83750; font-weight: 800; vertical-align: super;}
.outGrid .gridDetail { border-collapse: separate; border-spacing: 0 1px;}
.outGrid .gridDetail th,
.outGrid .gridDetail td { text-align:left; padding:7px 10px}
.outGrid .gridDetail td .inputData { margin-bottom:0}
.outGrid .gridDetail td .help_txt { margin:5px 10px 0; padding-left:0; font-size:15px; color:#d63f43; font-weight: 300;}
.outGrid .gridDetail td .help_txt:before { display: none;}
.outGrid .gridDetail th { padding-left:24px; border-left:0; font-weight: 600; color:#323232; letter-spacing: -1px; background: #f9f9f9;}
.outGrid .gridDetail th label { font-weight: 600;}
.gridDetail.noTopLine:before { background:#cfcfcf}

.outGrid .picArea{ float:left; text-align: center;}
.outGrid .picArea div { position: relative; border: 1px solid #ccc; background: #fff; width:200px; height: 260px; margin:8px; display:flex; flex-direction: column; justify-content: center; align-items: center; }
.outGrid .picArea div:before { content:''; display: block; position: absolute; top:-8px; left:-8px; width:100%; height:100%; padding:8px; background:#eee; z-index: -1;}
.outGrid .picArea div span{ font-size: 15px; line-height: 1.2; display: block; margin-bottom: 10px;}
.outGrid .picArea p { padding:8px; background:#eee;}
.outGrid .picArea p img{ width: 200px; height:260px; border: 1px solid #ccc;}
.outGrid .picArea>a { margin-top:10px;}
.outGrid .picArea + .fr { width:calc(100% - 236px)}
.outGrid .gridDetail td.videoArea { padding:15px 0 0; text-align:center}

.outPicArea{ padding-left: 220px;  min-height: 150px;}
.outPicArea .picArea{ position: absolute; left: 0; top: 0; background: #eee; z-index: 1; text-align: center;  padding: 8px}
.outPicArea .picArea p{ border: 1px solid #ccc; background: #fff; width:192px; height: 222px; vertical-align: middle; text-align: center; overflow: hidden}
.outPicArea .picArea p span{ font-size: 15px; line-height: 1.2; display: block; margin-bottom: 10px; padding-top: 50px;}
.outPicArea .picArea p img{ width: 100%;}
.outPicArea .gridDetail td,
.outPicArea .gridDetail th { line-height:33px}

.fileNm { display: inline-block; position: relative; padding-left: 25px; padding-right:10px; margin-right:-3px; font-weight: 300 !important; line-height:35px; background:#f0f0f0}
.fileNm:before { content: ''; display: block; background: url(../../../images/sf/common/icon.png) no-repeat -118px -23px; width: 10px; height: 17px; position: absolute; left: 10px; top: 10px}
.addFile { display: inline-block; position: relative; padding-left: 20px; }
.addFile:before{ content: ''; display: block; background: url(../../../images/sf/common/icon.png) no-repeat -101px -23px; width: 15px; height: 16px; position: absolute; left: 0; top:2px}
.info_txt { position: relative; margin-top:5px; padding-left:20px; font-weight: 200; }
.info_txt:after { content:''; display: block; position: absolute; top:2px; left:0; width:15px; height:15px; background:url(../../../images/sf/common/icon.png) no-repeat -326px -285px}
.source_txt { position: relative; margin-top:10px; padding-left:30px; font-size:15px; font-weight: 200; }
.source_txt:after { content:''; display: block; position: absolute; top:1px; left:12px; width:12px; height:16px; background:url(../../../images/sf/common/icon.png) no-repeat -147px -97px}
.help_txt{ font-size: 15px; color: #000; letter-spacing: -0.045em; line-height: 1.3; margin: 10px 0; padding-left: 25px; position: relative}
.point_txt{ margin: 10px 0 0; color: #000; font-size: 15px; font-weight: 400;}
.listLine li .point_txt{ margin-top: 0}
.point_txt:before{ content: '\273D'; display: inline-block; color: #cb330a; font-weight: 600; font-size: 18px;}
.help_txt.orange{ color: #ff6c00; font-weight: 400}
.help_txt.orange:before{ color: #000}
.help_txt:before{ content: ''; display: block; margin-right: 3px; position: absolute; left: 5px; top: 4px; background: url(../../../images/sf/common/icon.png) no-repeat -310px -137px; width: 17px; height: 14px; vertical-align: middle}
.inputData.hasDatepicker{ background:#fff url(../../../images/sf/common/calendar.gif) no-repeat 100% 50%;}
.inputData.password { padding-left:25px; background:#fff url(../../../images/sf/sub/password.png) no-repeat 10px 50%; }
input[disabled='disabled'].inputData{ background: #f8fbfd}



/* 썸네일형_게시판 */
.thumbList { border-top:2px solid #323232}
.thumbList:after { content:""; clear: both; display: block;}
.thumbList>li { float:left; width:25%; padding:20px 13px 15px; border-bottom:1px solid #c7c7c7;}
.thumbList>li>a { display: block;}
.thumbList .thumb { position: relative; overflow: hidden; width:100%; height:190px; background: #9e9c9c;}
.thumbList .thumb img { width:100%; height:100%; transition:.5s transform ease}
.thumbList .cate { position:absolute; bottom:0; left:0; padding:0 20px; line-height:35px; color:#fff; font-size:15px; font-weight:300; background:#d63f43; z-index: 1;}
.thumbList a:hover .thumb img,
.thumbList a:focus .thumb img { transform:scale(1.08) rotate(0.1deg)}
.thumbList dt { margin-top:15px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.thumbList dd { font-size:15px; margin-top:15px; font-weight: 300;}
.thumbList .btnArea { margin:15px 0; text-align: left;}
.thumbList .btnArea a.ico_blank { margin-bottom:3px; padding:0 12px 0 15px}
.thumbList .btnArea a.ico_blank:after { margin-left:15px}

/* e-book형_게시판 */
.ebookList { border-top:2px solid #323232;}
.ebookList:after { content:''; clear:both; display: block; }
.ebookList li { float:left; width:33.33%; position:relative; margin-top:20px; padding:0 0 30px 220px; border-bottom:1px solid #c7c7c7 }
.ebookList li .thumb { position: absolute; top:0; left:0; width:200px; height:250px; border:1px solid #c7c7c7; background: #fff;}
.ebookList li .thumb:after { content:''; display:block; position: absolute; top:2px; left:5px; width:100%; height:calc(100% - 4px); border:1px solid #c7c7c7; box-sizing: border-box; z-index: -1;;}
.ebookList li .thumb img { width:100%; height:100%}
.ebookList li .thumb .cate { position:absolute; top:-1px; left:-1px; padding:0 20px; color:#fff; font-size:15px; font-weight: 300; line-height: 35px; background:#d63f43}
.ebookList li dl { position: relative; width:85%; min-height:250px; padding:10px 0 4px 0; line-height: 25px;}
.ebookList li dt { font-size:18px; }
.ebookList li dd { font-weight: 300}
.ebookList li dd.tag { display: flex; flex-wrap: wrap; gap:8px; margin-top:8px}
.ebookList li dd.btnArea { position: absolute; bottom:4px; left:0; margin:0; text-align: left;}
.ebookList li dd.btnArea .button  { min-width:110px; margin-top:5px; padding-left:15px;}
.ebookList li dd.btnArea .button:after { content:''; display: inline-block; margin-left:10px; background:url(../../../images/sf/common/icon.png) no-repeat}
.ebookList li dd.btnArea .button.view:after { width:13px; height:9px; background-position: -221px -294px;}
.ebookList li dd.btnArea .button.blank:after { width: 14px; height: 14px; margin-bottom:-1px; background-position: -44px -3px;}
.ebookList li dd.btnArea .button.download:after { width: 13px; height: 14px; margin-bottom:-1px; background-position: -69px -23px;}

/* 이미지형_게시판 */
.txtList { border-top:2px solid #323232;}
.txtList li { padding:20px 0; border-bottom:1px solid #c7c7c7}
.txtList li:after { content:""; clear: both; display: block;}
.txtList li .thumb { float:left; width:200px; height: 113px; margin-right:20px; border:1px solid #c7c7c7}
.txtList li .thumb img { width:100%; height:100%;}
.txtList li .thumb + dl { width:calc(100% - 220px)}
.txtList li dl { float: left; width:100%}
.txtList li dt { margin-top:5px; font-size:18px;}
.txtList li dt span { display: inline-block; margin-left:20px; font-weight: 300; color:#686868; font-size:16px;}
.txtList li dd { margin-top:10px; font-weight: 300; line-height: 22px; }
.txtList li dd.cont { height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.txtList li dd.info span { display:inline-block; vertical-align: top; font-size: 15px;}
.txtList li dd.info span + span { margin-left:13px; }
.txtList li dd.info .ico_time { color:#d63f43; }
.txtList li dd.info .ico_time:before { content:''; display: inline-block; margin-right:3px; width:13px; height:14px; margin-top:-2px; vertical-align: middle; background: url(../../../images/sf/common/icon.png) no-repeat -204px -295px; }
.txtList li dd.addr,
.txtList li dd.txt { position: relative; padding-left:20px; padding-right:155px}
.txtList li dd.addr:before { content:''; display:block; position: absolute; top:2px; left:1px; width:12px; height:17px; background:url(../../../images/sf/common/icon.png) no-repeat -309px -234px}
.txtList li dd.txt:before { content:''; display:block; position: absolute; top:3px; left:0; width:14px; height:15px;  background:url(../../../images/sf/common/icon.png) no-repeat -324px -234px}
.txtList li dd.addr .ico_blank { position: absolute; top:-35px; right:10px; width:135px; height:111px; display: flex; justify-content: center; align-items: center; border:1px solid #a3aab8; background:#eee; z-index: 1;}


/* 검색 */
.searchBox{ position:relative; margin-top:0; margin-bottom: var(--krds-gap-5); padding:14px 14px 14px 23px; border:1px solid #bfbfbf; background:#f5f5f5}
.searchBox .totalPage { flex-shrink: 0; line-height: 35px;}
.searchBox .totalPage:before { content:''; display:inline-block; width:16px; height:16px; margin:-3px 5px 0 0; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -132px -151px}
.searchBox .totalPage strong { color:#003675; font-weight: 700; }
.searchBox .searchForm { width: auto;}
.searchBox .searchForm li{ display:inline-block; vertical-align: top;}
.searchBox .searchForm .inputData { margin-bottom:0; min-width:210px;}
.searchBox .button { min-width: auto; margin-left:-4px; padding:0 20px;}



/* 게시판 상세 */
.boardView .titleArea { position: relative; display: flex; margin-bottom:10px; border-radius:10px; border:1px solid var(--krds-color-light-secondary-20);}
.boardView .titleArea dt { width:50%; padding:14px 25px; border-radius: 10px; font-size:20px; font-weight: 700; line-height: 40px; background:var(--krds-light-color-surface-secondary-subtler)}
.boardView .titleArea dt:before { content:''; display: inline-block; width:37px; height:28px; vertical-align: text-bottom; margin-right:10px; background:url(../../../images/sf/common/icon.png) no-repeat -114px -214px}
.boardView .titleArea dd { width:50%; padding:12px 25px; }
.boardView .titleArea dd span { position: relative; display: inline-block; width:49%; min-height: 44px; padding:12px 0 2px 50px; vertical-align: top; line-height: 20px;}
.boardView .titleArea dd i { position: absolute; top:2px; left:0; width:40px; height:40px; margin-right:10px; border-radius:100%; border:2px solid #c5e9f3; display:inline-flex; justify-content: center; align-items: center; }
.boardView .titleArea dd i:after { content:''; display:block; background:url(../../../images/sf/common/icon.png) no-repeat}
.boardView .titleArea dd .ico_addr i:after { width:14px; height:15px; background-position: -15px -176px;}
.boardView .titleArea dd .ico_name i:after { width:14px; height:14px; background-position: -32px -176px;}
.boardView .titleArea dd .ico_tel i:after { width:14px; height:15px; background-position: -49px -176px;}
.boardView .titleArea dd .ico_locate i:after { width:13px; height:14px; background-position: 0 -176px;}
.boardView .titleArea dd .ico_book i:after { width:14px; height:17px; background-position: 0 -194px;}
.boardView .titleArea dd .ico_date i:after { width:14px; height:15px; background-position: -17px -195px;}
.boardView .titleArea dd .ico_tag i:after { width:16px; height:17px; background-position: -147px -116px;}
.boardView .titleArea h3 { position:relative; flex: 1; padding:22px 25px 22px 70px; border-radius: 10px; font-size:20px; font-weight: 700; background:var(--krds-light-color-surface-secondary-subtler)}
.boardView .titleArea h3:before { content:''; display:block; position:absolute; top:50%; left:25px; transform: translateY(-50%); width:34px; height:34px; background:url(../../../images/sf/common/icon.png) no-repeat -77px -214px}
.boardView .titleArea .button { position: absolute; top:17px; right:16px; border-radius: 5px;}

.boardView .contArea .infoArea { display: flex; flex-wrap: wrap;}
.boardView .contArea .infoArea dl { width:100%; padding:11px 0; border-bottom:1px dashed #d7d8d8}
.boardView .contArea .infoArea dl:first-child { width:40%}
.boardView .contArea .infoArea dl:nth-child(2),
.boardView .contArea .infoArea dl:nth-child(3) { width:30%}
.boardView .contArea .infoArea dl:last-child { border-bottom:0}
.boardView .contArea .infoArea dt { position: relative; display: inline-block; font-weight: 700; padding-left:15px; vertical-align: top; line-height: 25px;}
.boardView .contArea .infoArea dt:before { content:''; display: block; position: absolute; top:9px; left:5px; width:4px; height:4px; background:#454545}
.boardView .contArea .infoArea dd { display: inline-block; padding-left:15px; line-height: 25px; line-break: anywhere;}
.boardView .contArea h3 { position: relative; display:block; margin-bottom:10px; padding-left:15px; font-size: 1.7rem;}
.boardView .contArea h3:before { content:''; display: block; position: absolute; top:6px; left:5px; width:4px; height:4px; background:#454545}
.boardView .contArea .textBox { float: left; width:100%; padding:30px 0; border-bottom:1px dashed #d7d8d8}


.fileDownArea { padding:7px 0 2px; border-top:1px dashed #d7d8d8; border-bottom:1px dashed #d7d8d8; background:#f9f9f9;}
.fileDownArea li { display: inline-block; width:45%; margin:0 2% 5px; line-height: 35px;}
.fileDownArea li:before { content:''; display: inline-block; width:20px; height:11px; margin-right:6px; background: url(../../../images/sf/common/icon.png) no-repeat -34px -194px;}
.fileDownArea li .button { border-radius:5px; margin-left:12px;}



/* 팝업 */
#popWrap { display: flex; min-height: 100%; min-height: 100vh; padding:0 7px 7px; flex-direction: column; background: linear-gradient(to right, #39be4a, #23507b);}
#popWrap h1 { color: #fff; font-size: 25px; font-weight: bold; padding: 20px 10px; }
#popWrap h1 span { display: inline-block; margin-left:20px; font-size:18px}
#popWrap .popCont { position: relative; flex: 1 auto; flex: 1 0 0; -ms-flex: 1 0 0; padding: 20px; font-size:16px; background: #fff;}
#popWrap .popCont .button.topBtn { position: absolute; top:-50px; right: 8px; border-color:transparent; text-align: center; }
#popWrap .outGrid .gridDetail th { padding-left:25px}
#popWrap .btnArea { margin-bottom:20px}
#popWrap .popClose { min-width: 114px;}
#popWrap .infoBox { margin:-20px 0 15px -20px; width:calc(100% + 40px); padding:10px 13px; }
#popWrap .infoBox:before { display: none;}
#popWrap .chkWrap { display: flex; flex-wrap: wrap;}
#popWrap .chkWrap label { margin-right:10px !important; line-height: initial; letter-spacing: -1px; width:calc(20% - 10px); padding:8px 0 8px 27px}
#popWrap .chkWrap input[type='checkbox'] + label:before { margin:0; position: absolute; top:8px; left:0}

/* 레이어팝업 */
.layerPop{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 21; display: none}
.layerPop>div { width: 560px; background:linear-gradient(to right, #39be4a, #23507b);  position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }
.layerPop h1 { color: #fff; font-size: 20px; font-weight: 600; padding: 17px 17px 15px 17px; line-height: 1;}
.layerPop h1 span{ display: block; font-size: 15px; color: #fff; margin-bottom: 5px; line-height: 1; font-weight: 300}
.layerPop .popCont{ flex: 1 auto; flex: 1 0 0; -ms-flex: 1 0 0; margin:0 10px 10px; padding: 20px; background: #fff;}
.layerPop .popCont .warning { text-align:center}
.layerPop .popCont .warning i { display:block; width:60px; height:60px; margin:0 auto 28px; background:url('../../../images/sf/common/icon.png') no-repeat -128px -387px}
.layerPop .btnArea { margin-bottom:10px; background: #fff; }



/* 팁박스 */
.referLineBox { max-width:1280px; min-height: 110px; margin:0 auto 45px; padding: 25px 30px 25px 129px; position: relative; line-height: 1.5; z-index: 1;}
.referLineBox:before { content:''; display: block; position: absolute; top:0; left:0; width:100%; height:35px; box-sizing: border-box; border: 5px solid transparent; border-bottom:0; border-radius: 10px 10px 0 0; background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #39be4a, #147a69); background-origin: border-box; background-clip: content-box, border-box; z-index: -1; }
.referLineBox:after { content:''; display: block; position: absolute; bottom:0; left:0; width:100%; height:35px; box-sizing: border-box; border:5px solid #e3e4e6; border-top:0; border-radius: 0 0 10px 10px; }
.referLineBox>p>strong { display: block; font-size: 20px; font-weight: 600;}
.referLineBox>p>span>strong { display: inline-block; font-size: 20px; font-weight: 600;}
.referLineBox>i { position: absolute; display: block; background: url(../../../images/sf/common/refer_icon.png) no-repeat -78px 0; width: 72px; height: 59px; left: 30px; top: 23px}
.referLineBox>i.icon2 { width: 75px; height: 60px; background-position:0 0;}
.referLineBox>i.icon3 { width:76px; background-position:-155px 0;}
.referLineBox>i.icon4 { width:70px; background-position:0 -63px;}
.referLineBox>i.icon5 { width:79px; height:58px; background-position:-74px -63px;}
.referLineBox>i.icon6 { width:60px; height:58px; background-position:-156px -63px;}
.referLineBox>i.icon7 { width:74px; height:60px; background-position:-219px -63px;}
.referLineBox>i.icon8 { height:60px; background-position:-296px -63px;}
.referLineBox>i.icon9 { width:57px; height:60px; background-position:-235px 0;}
.referLineBox>i.icon10 { width:61px; background-position:-295px 0;}
.referLineBox>i.icon11 { width:68px; height:61px; background-position:-371px -63px;}
.referLineBox>i.icon12 { width:73px; height:56px; background-position:-359px 0;}
.referLineBox>i.icon13 { width:67px; height:61px; background-position:-435px 0;}
.referLineBox>i.icon14 { width:69px; height:61px; background-position:-442px -63px;}
#container>.referLineBox { margin:45px auto 15px;}
.referLineBox .dashedLine { margin-top:10px; padding-top:10px; border-top:1px dashed #afbbc2;}

.referBox { position: relative; margin-top: 30px; border: 2px solid #e3e4e6; padding:25px; border-radius: 10px;}
.referBox:before { content:''; display: block; position: absolute; top:-2px; left:-2px; width:calc(100% + 4px); height:30px; box-sizing: border-box; border: 2px solid #1e9d29; border-bottom:0; border-radius: 10px 10px 0 0;}
/*.referBox:after { content:''; display: block; position: absolute; bottom:-6px; right:13px; width:123px; height:104px; background:url(/images/sf/sub/icon.png) no-repeat -364px -520px}*/

.referBox2{ background: #f3f4f8; padding: 10px 20px; border:1px solid #ccc}
.referBox2 .wordB{ display: inline-block; color: #fff; font-size: 15px; font-weight: 300}
.referBox2 .wordB:before{ content: ''; display: inline-block; vertical-align: middle; background: url(../../../images/sf/common/icon.png) no-repeat -348px -117px; width: 14px; height: 13px; margin-right: 5px}

.referLineBox.inPre pre{ display: block; white-space: break-spaces; margin: 0; font-family: inherit;}

.referLineBox .point_txt{ margin: 0}
.refer_txt:before{ content: ''; display: inline-block; position: static; vertical-align: middle; margin-right: 10px}
.referLineBox2{ background: #fff; border: 3px solid #dfdfdf; padding: 90px 30px 20px 175px; position: relative; letter-spacing: -.5px;}
.referLineBox2>i{ position: absolute; display: block; background: url(../../../images/sf/common/icon.png) no-repeat 0 -151px; width: 98px; height: 98px; left: 35px; top: 93px}
.referLineBox2>p { position: absolute; top:-3px; left:-3px; width:calc(100% + 6px); padding:14px 50px; color:#fff; text-align:center; background:#00ad51}



/* UL list style */
.listSq>li{ padding: 5px 0 5px 18px; position: relative; line-height: 1.5}
.listSq>li:before{ content: ''; display: block; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; border:4px solid transparent; border-radius: 100%; box-sizing: border-box; background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #39be4a, #23507b); background-origin: border-box; background-clip: content-box, border-box;}
.listSq>li dl { display: flex;}
.listSq>li dt { display:inline-block; min-width:80px; margin-right:10px; font-weight:500}
.listSq>li dd { display:inline-block; }

li .listDot { margin-top:10px;}
.listDot>li { position: relative; padding: 3px 0 3px 12px; font-weight: 300; line-height: 1.5; }
.listDot>li:before{ content: ''; display: block; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 100%; background: #393939;}

li .listLine { margin-top:5px}
.listLine>li{ padding:2px 0 2px 10px; line-height: 1.5; position: relative; font-size: 15px; font-weight: 360; color:#575757}
.listLine>li:before{ content: ''; display: block; position: absolute; left: 0; top: 12px; width: 4px; height: 1px; background: #8f8f8f;}

.listS li{  font-size: 16px; margin-bottom: 5px; position: relative; padding-left: 15px}
.listS i{ display: block; width: 6px; height: 6px; background: #0f8d45; position: absolute; left: 0; top: calc(50% - 3px)}
.listS.cols li{ display: inline-block; margin-right: 30px}
.listS.cols li:last-child{ margin-right: 0}
.listS.info{ margin-top: 20px}
.listS.info li{ font-size: 16px; margin-bottom: 15px}
.listS.info li .point_txt{ margin: 0 0 0 10px; color: #686868}
.listS.info ul{ margin: 5px 0 0 20px}
.listS.info ul li{ font-size: 15px; color: #686868; margin-bottom: 5px}

.listN li{  font-size: 16px;  position: relative; font-weight: 300; }
.listN li label { margin-right:15px}
.listN.cols li{ display: inline-block; margin-right: 30px}
.listN.cols li:last-child{ margin-right: 0}
ol.listN li { margin-bottom:10px}

.iconListWrap { display: flex; flex-wrap: wrap; }
.iconListWrap .iconList { position: relative; width:50%; padding:22px 20px 22px 182px; border-bottom:1px dashed #afbbc2}
.iconListWrap .iconList .listTitle { margin-bottom:10px; font-size:18px; font-weight: 600;}
.iconListWrap .iconList i { position: absolute; top:20px; left:40px; display: flex; justify-content: center; align-items: center; width:122px; height:122px; border-radius: 100%; background:#1e9abe;}
.iconListWrap .iconList i:after { content:''; display: block; background: url(../../../images/sf/sub/icon.png) no-repeat;}
.iconListWrap .iconList li .listLine { margin-top:0}



/* box style */
.grayBox{ margin: 10px 0 30px; background: #f1f1f1; border-top: 1px solid #e3e3e3; padding: 10px 20px}
.grayBox .help_txt{ background: #fff; padding: 5px 10px 5px 25px}
.grayBox .help_txt:before{ top: 7px}
.grayBox2 { padding:20px 30px; background:#efefef}
.grayBox2 .info_txt { position:relative; padding-left:20px; color:#0f8d45}
.grayBox2 .info_txt:before { content:''; display: block; position:absolute; top:3px; left:0; width:13px; height:18px; background: url(../../../images/sf/common/icon.png) no-repeat -236px -63px}
.grayBox3 { padding:30px 25px; line-height: 28px; background:#f1f6f9}
.greenBox{ margin: 10px 0 0; background: #fff; border: 1px solid #0f8d45; padding: 20px 20px 80px; text-align: center; position: relative;}
.lineBox { padding:15px 30px; border: 1px solid #0f8d45;}
.lineBox .info_txt { position:relative; padding-left:20px;}
.lineBox .info_txt:before { content:''; display: block; position:absolute; top:4px; left:0; width:12px; height:17px; background: url(../../../images/sf/common/icon.png) no-repeat -200px -42px}

.infoBox { position: relative; min-height: 152px; margin-bottom:30px; padding:20px 23px; background:#f1f6f9}
.infoBox:before { content: ''; display: block; position: absolute; bottom:0; right:43px; width:230px; height:31px; background:url(../../../images/sf/common/refer_icon.png) no-repeat 0 -126px}
.infoBox:after { content: ''; display: block; position: absolute; bottom:0; right:0; width:45px; height:45px; border-right:5px solid #c7ddea; border-bottom:5px solid #c7ddea }
.infoBox>p { position: relative; width:87%; padding-left:37px; font-family: 'Iropke Batang'; font-size:20px; line-height: 30px; letter-spacing: -1px;}
.infoBox>p:before { content:'“'; display: block; position: absolute; top:0; left:10px; font-size:60px; font-weight: bold; color:#39be4a; line-height: 1; }
.infoBox>p:after { content:'”'; display: inline-block; margin-left:5px; font-size:60px; font-weight: bold; color:#39be4a; line-height: 1; vertical-align: top;}
.infoBox .dashedLine { border-top:1px dashed #afbbc2; padding:15px 22px 0 22px; font-weight: 300;}
.infoBox.colorRed { background:#f9f1f6}
.infoBox.colorRed:before { background-position:-233px -126px;}
.infoBox.colorRed:after { border-color:#edd9e5}
.infoBox.colorYellow { background:#f9f8f1}
.infoBox.colorYellow:before { background-position:0 -160px;}
.infoBox.colorYellow:after { border-color:#e4e0c2}
.infoBox.colorGreen { background:#f1f9f3}
.infoBox.colorGreen:before { background-position:-233px -160px;}
.infoBox.colorGreen:after { border-color:#c9efd2}

.imgBox { margin:30px 0; text-align: center;}
.imgBox img { max-width:100%; padding:19px; border:1px solid #c9d2d9}



/* 탭메뉴 */
.tab_btn { display:flex; margin-bottom:20px; border:1px solid #cacaca; border-radius: 10px; background:#fbfbfb;}
.tab_btn li { flex:1; position:relative; border-left:1px solid #cacaca}
.tab_btn li:first-child { border-left:0}
.tab_btn li a { display: block; line-height: 48px; text-align: center; color:#000; font-weight: 300; letter-spacing: -1px;}
.tab_btn li a:before { content:''; display: inline-block; width:18px; height:18px; margin-right:4px; margin-top:-3px; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -162px -88px}
.tab_btn li.active:after { content:''; display:block; position: absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); border-radius: 10px; border:3px solid transparent; box-sizing: border-box; background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #39be4a, #23527a); background-origin: border-box; background-clip: content-box, border-box; }
.tab_btn li.active a { font-size:18px; position: relative; font-weight: 700; z-index: 1}
.tab_btn li.active a:before { background-position: -183px -88px;}
.tab_btn li button.icon.write { position:absolute; top:7px; right:7px; z-index:3}
.tab_con .tab_content { display:none; margin-bottom:35px;}

.subtab_btn { display:flex; flex-wrap: wrap; margin:0 20px 57px;}
.subtab_btn li { width:20%; margin-bottom:3px; margin-right:-1px}
.subtab_btn li a { display: block; padding:0 8px; line-height: 48px; text-align: center; color:#606060; border:1px solid #b9d8dd; letter-spacing: -1px; background:#edf6f8}
.subtab_btn li a:after { content:''; display: inline-block; width:18px; height:18px; margin-left:4px; margin-top:-3px; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -162px -88px}
.subtab_btn li a span { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width:calc(100% - 22px); vertical-align: middle;}
.subtab_btn li.active a { font-weight: 700; border-color:#1e9d29; color:#fff; background: #1e9d29;}
.subtab_btn li.active a:after { background-position: -204px -88px;}
.subtab_con .tab_content { display:none; margin-bottom:35px;}


.lnkTabs.tab_btn li.active a { text-align:left; padding:0 15px;  font-size:16px}
.lnkTabs.tab_btn li button.icon.write { display:none;  position:absolute; top:7px; right:7px; z-index:3}
.lnkTabs.tab_btn li.active button.icon.write { display:block;}
.tab_btn_line { display: flex; margin-bottom:20px; justify-content:center}
.tab_btn_line li { padding:0 35px 5px; border-bottom:4px solid #e9e9e9}
.tab_btn_line li.active { border-bottom-color:#00ad51}
.tab_btn_line li a { display: block; color:#686868; font-weight: 300; line-height: 30px;}
.tab_btn_line li.active a { color:#323232; font-size:18px; font-weight: 500;}



/* 치유농장/프로그램 검색 */
.searchMap { margin-bottom:60px; border:1px solid var(--krds-light-color-border-gray); border-radius: 10px; background:var(--krds-light-color-surface-gray-subtler);}
.searchMap:after { content:""; clear: both; display:block}
.searchMap .title { margin-bottom:17px; font-size:18px;}
.searchMap .chkSearchBox { float:right; width:70%; margin:-1px;}
.searchMap .chkSearchBox .chkForm { margin:0 20px; }
.searchMap .chkSearchBox .shcForm .inputData { max-width: none;}
.searchMap .mapBox { float:left; width:30%; padding:23px 25px 26px;}
.mapBox .mapArea { position:relative; width:233px; height:307px; margin:0 auto; background:url(../../../images/sf/sub/map/img_map.png) no-repeat 0 0}
.mapBox .mapArea#seoul { background-image: url(../../../images/sf/sub/map/img_seoul.png);}
.mapBox .mapArea#gyeonggi { background-image: url(../../../images/sf/sub/map/img_gyeonggi.png);}
.mapBox .mapArea#incheon { background-image: url(../../../images/sf/sub/map/img_incheon.png);}
.mapBox .mapArea#gangwon { background-image: url(../../../images/sf/sub/map/img_gangwon.png);}
.mapBox .mapArea#chungBuk { background-image: url(../../../images/sf/sub/map/img_chungBuk.png);}
.mapBox .mapArea#chungNam { background-image: url(../../../images/sf/sub/map/img_chungNam.png);}
.mapBox .mapArea#deajeon { background-image: url(../../../images/sf/sub/map/img_deajeon.png);}
.mapBox .mapArea#sejong { background-image: url(../../../images/sf/sub/map/img_sejong.png);}
.mapBox .mapArea#gyeongBuk { background-image: url(../../../images/sf/sub/map/img_gyeongBuk.png);}
.mapBox .mapArea#gyeongNam { background-image: url(../../../images/sf/sub/map/img_gyeongNam.png);}
.mapBox .mapArea#deagu { background-image: url(../../../images/sf/sub/map/img_deagu.png);}
.mapBox .mapArea#ulsan { background-image: url(../../../images/sf/sub/map/img_ulsan.png);}
.mapBox .mapArea#busan { background-image: url(../../../images/sf/sub/map/img_busan.png);}
.mapBox .mapArea#jeonBuk { background-image: url(../../../images/sf/sub/map/img_jeonBuk.png);}
.mapBox .mapArea#jeonNam { background-image: url(../../../images/sf/sub/map/img_jeonNam.png);}
.mapBox .mapArea#gwangju { background-image: url(../../../images/sf/sub/map/img_gwangju.png);}
.mapBox .mapArea#jeju { background-image: url(../../../images/sf/sub/map/img_jeju.png);}
.mapBox .mapArea a { position:absolute; font-size:15px; color:#4d4d4d; line-height:1.2; font-weight: 500; text-shadow:1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff}
.mapBox .mapArea a:hover,
.mapBox .mapArea a:focus { color:#d63f43}
.mapBox .mapArea a.active { color:#fff; text-shadow: none; padding:0 10px; line-height: 25px; border-radius: 5px; background:#d63f43;}
.mapBox .mapArea a.seoul {top: 60px;left: 50px;}
.mapBox .mapArea a.gyeonggi {top: 32px;left: 60px;}
.mapBox .mapArea a.incheon {top: 50px;left: 10px;}
.mapBox .mapArea a.gangwon {top: 55px;left: 130px;}
.mapBox .mapArea a.chungBuk {top: 115px;left: 85px;}
.mapBox .mapArea a.chungNam {top: 145px;left: 10px;}
.mapBox .mapArea a.deajeon {top: 155px;left: 65px;}
.mapBox .mapArea a.sejong {top: 125px;left: 55px;}
.mapBox .mapArea a.gyeongBuk {top: 145px;right: 50px;}
.mapBox .mapArea a.gyeongNam {bottom: 65px;right: 85px;}
.mapBox .mapArea a.deagu {bottom: 100px;right: 80px;}
.mapBox .mapArea a.ulsan {bottom: 75px;right: 40px;}
.mapBox .mapArea a.busan {bottom: 50px;right: 55px;}
.mapBox .mapArea a.jeonBuk {top: 195px;left: 35px;}
.mapBox .mapArea a.jeonNam {bottom: 35px;left: 20px;}
.mapBox .mapArea a.gwangju {bottom: 55px;left: 20px;}
.mapBox .mapArea a.jeju {bottom: 5px;right: 30px;}

.chkSearchBox { margin-bottom:60px; overflow: hidden; border:1px solid var(--krds-light-color-border-gray); border-radius: 10px; text-align: center; background: #fff;}
.chkSearchBox .title { margin-bottom:17px; font-size:18px;}
.chkSearchBox li label { display: block; }
.chkSearchBox li label:after { content:''; display: inline-block; width:18px; height:18px; margin:-3px 0 0 9px; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -162px -88px}
.chkSearchBox li input[type='checkbox']:checked + label:after { background-position: -204px -88px;}

.chkSearchBox .chkLife { display: flex; border-bottom:1px solid var(--krds-light-color-border-gray); background:var(--krds-light-color-surface-secondary-subtler)}
.chkSearchBox .chkLife li { flex:1; text-align:center; border-left:1px solid var(--krds-light-color-border-gray) }
.chkSearchBox .chkLife li:first-child { border-left:0}
.chkSearchBox .chkLife li label:before { content:''; display: inline-block; margin-right:10px; width:61px; height:61px; vertical-align: middle; background: url(../../../images/sf/common/icon.png) no-repeat 0 0;}
.chkSearchBox .chkLife li.child label:before { background-position: 0 -292px;}
.chkSearchBox .chkLife li.teenager label:before { background-position: -64px -292px;}
.chkSearchBox .chkLife li.adult label:before { background-position: -128px -292px;}
.chkSearchBox .chkLife li.senior label:before { background-position: 0 -356px;}
.chkSearchBox .chkLife li label { padding:8px; }
.chkSearchBox .chkLife li input[type='checkbox']:checked + label{ color:#fff; font-weight: 700; background:#147a69}

.chkSearchBox .chkForm { padding-top:22px; border-bottom:1px dashed #d7d8d8; }
.chkSearchBox .chkForm ul { display: flex; justify-content: center;}
.chkSearchBox .chkForm li { width:156px; margin:0 5px 10px;}
.chkSearchBox .chkForm li label{ border-radius: 10px; border:1px solid var(--krds-light-color-border-secondary-light); line-height:43px; background: var(--krds-light-color-surface-secondary-subtler);}
.chkSearchBox .chkForm li label:before { display: none;}
.chkSearchBox .chkForm li label:after { margin-left:5px}
.chkSearchBox .chkForm li input[type='checkbox']:checked + label{ color:#fff; font-weight: 700; background:var(--krds-light-color-action-secondary-active); border-color:var(--krds-light-color-action-secondary-active)}
.chkSearchBox .shcForm { padding:14px 20px; display: flex; gap:.4rem}
.chkSearchBox .shcForm .inputData { width:calc(100% - 135px); max-width:540px; height:55px; margin-bottom:0; background:#f9f9f9;}
.chkSearchBox .shcForm .button { width:65px; height:55px; line-height: 53px; padding:0 }
.chkSearchBox .shcForm .button.search:before { width:20px; height:20px; background-position: 0 0;}
.chkSearchBox .shcForm .button.search { margin-left:-5px}
.chkSearchBox .shcForm .button.reset:before { width:19px; height: 19px; background-position: -214px -42px;}

.searchMap.bgMap2 { border-top-color:#00ad51}
.searchMap.bgMap2 .mapBox { width:284px; padding:0 42px;}
.searchMap.bgMap2 .mapBox .mapArea { width:200px; height:283px; margin:75px 0 25px; background:url(../../../images/sf/sub/bgMap2.png) no-repeat 50%}
.searchMap.bgMap2 .mapBox .mapArea a { font-weight: 400;}
.searchMap.bgMap2 .mapArea a.seoul { top:40px; left:50px;}
.searchMap.bgMap2 .mapArea a.gyeonggi { top:65px; left:50px;}
.searchMap.bgMap2 .mapArea a.incheon {top: 32px;left: 15px;}
.searchMap.bgMap2 .mapArea a.gangwon {top: 30px;left: 95px;}
.searchMap.bgMap2 .mapArea a.chungBuk {top: 85px;left: 75px;}
.searchMap.bgMap2 .mapArea a.chungNam {top: 90px;left: 13px;}
.searchMap.bgMap2 .mapArea a.deajeon {top: 120px;left: 75px;}
.searchMap.bgMap2 .mapArea a.sejong {top: 102px;left: 57px;}
.searchMap.bgMap2 .mapArea a.gyeongBuk {top: 110px;left: 110px;}
.searchMap.bgMap2 .mapArea a.gyeongNam {top: 171px;left: 80px;}
.searchMap.bgMap2 .mapArea a.deagu {top: 140px;left: 110px;}
.searchMap.bgMap2 .mapArea a.ulsan {top: 155px;left: 140px;}
.searchMap.bgMap2 .mapArea a.busan {top: 181px;left: 135px;}
.searchMap.bgMap2 .mapArea a.jeonBuk {top: 146px;left: 35px;}
.searchMap.bgMap2 .mapArea a.jeonNam {top: 195px;left: 25px;}
.searchMap.bgMap2 .mapArea a.gwangju {top: 170px;left: 20px;}
.searchMap.bgMap2 .mapArea a.jeju {bottom: 7px;left: 0;}
.searchMap.bgMap2 .mapBox p { color:#686868; font-size:15px; font-weight:300; letter-spacing: -.5px;}
.searchMap.bgMap2 .tabBox { float:left; width:calc(100% - 284px); height:530px; padding:20px; background:#fff}
.searchMap.bgMap2 .tabBox .listSq>li { padding-bottom:10px}
.searchMap.bgMap2 .tabBox .listLine>li { margin-top:10px}
.searchMap.bgMap2 .tabBox .centerInfo { display: flex;}
.searchMap.bgMap2 .tabBox .imgCenter {  margin-right:25px; width:332px;}
.searchMap.bgMap2 .tabBox .imgCenter img { width:100%;}



/* 치유농장 목록 */
.farm.thumbList li { padding:30px 13px 40px;}
.farm.thumbList dt { margin-top:20px; height:auto; font-size:18px; -webkit-line-clamp:1}
.farm.thumbList dd { margin-top:10px; color:#686868; line-height:22px; overflow: hidden; height:44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}



/* 프로그램 목록 */
.program.ebookList { border-top:0; border-bottom:1px solid #c7c7c7}
.program.ebookList li { width:50%; margin-top:0; border-bottom:0}

.lifeCycle span { display: inline-block; margin-bottom:5px; font-size:0; width:38px; height:38px; vertical-align: top; background:url(../../../images/sf/common/icon.png) no-repeat}
.lifeCycle span.child  { background-position:-75px -251px}
.lifeCycle span.schoolchild  { background-position:-307px -315px}
.lifeCycle span.teenager  { background-position:-115px -251px}
.lifeCycle span.adult  { background-position:-155px -251px}
.lifeCycle span.senior  { background-position:-155px -210px}



/* 치유농장/프로그램 상세 */
/* 활동사진 */
.farmImgSlide { margin:50px auto 0; padding-bottom:18px !important; }
.farmImgSlide .swiper-container { width:950px;}
.farmImgSlide .swiper-slide { height:190px}
.farmImgSlide .swiper-slide img { width:100%; height:100%}
.farmImgSlide.swiper .swiper-scrollbar { width:100%; left:0; bottom:0; height:8px; border-radius: 0; background:#efefef;}
.farmImgSlide.swiper .swiper-scrollbar-drag { border-radius: 0; background:#808080}

/* 국내농장 */
.farm.boardView .titleArea dt { width:25%; display: flex; line-height: 1.3; align-items: center;}
.farm.boardView .titleArea dd { width:75%}
.farm.boardView .titleArea dd span { width:24%}
.farm.boardView .titleArea dd span.ico_name,
.farm.boardView .titleArea dd span.ico_tag { width:20%}
.farm.boardView .titleArea dd span.ico_addr { position: relative; width:55%}
.farm.boardView .titleArea dd span.ico_addr .button.map { top:4px; right:auto; margin-left:10px; border-radius: 5px; vertical-align: middle; text-align: center;}

/* 프로그램 */
.program.boardView .titleArea dt:before { width:34px; height:34px; background-position:-77px -214px}
.program.boardView .contArea .infoArea { min-height:250px; margin-bottom:20px; margin-left:230px;}
.program.boardView .contArea .infoArea dl:first-child,
.program.boardView .contArea .infoArea dl:nth-child(2),
.program.boardView .contArea .infoArea dl:nth-child(3),
.program.boardView .contArea .infoArea dl:nth-child(4) { width:50%}
.program.boardView .contArea { position: relative; margin-top:20px}
.program.boardView .thumb { position: absolute; top:0; left:0; width:200px; height:250px; border:1px solid #c7c7c7; background: #fff;}
.program.boardView .thumb:after { content:''; display:block; position: absolute; top:2px; left:5px; width:100%; height:calc(100% - 4px); border:1px solid #c7c7c7; box-sizing: border-box; z-index: -1;;}
.program.boardView .thumb img { width:100%; height:100%}
.program.boardView .thumb .cate { position:absolute; top:-1px; left:-1px; padding:0 20px; color:#fff; font-size:15px; font-weight: 300; line-height: 35px; background:#d63f43}
.program.boardView .activeList { margin-top:40px;}
.program.boardView .activeList ul:after { content:''; clear:both; display: block;}
.program.boardView .activeList li { float:left; width:calc(50% - 5px); margin-bottom:10px; padding:10px; border-top:1px solid #3774d5; background:#f9f9f9}
.program.boardView .activeList li:nth-child(odd) { margin-right:10px;}
.program.boardView .activeList li span { display: inline-block; vertical-align: top; width:70px; height:30px; margin-right:12px; text-align: center; border:1px solid #a3aab8; border-radius: 5px; line-height: 28px; font-size:15px; font-weight: 300; background: #eee;}
.program.boardView .activeList li a { display: inline-block; line-height: 30px;}

.programTitle { font-weight:400; color:#323232 }
.programTitle:before { content:""; display:inline-block; width:12px; height:17px; margin-top:-4px; margin-right:8px; vertical-align: middle; background: url(../../../images/sf/common/icon.png) no-repeat -200px -42px }
.farmTitle { text-align:center; font-size:23px; font-weight:500; line-height:50px;}
.roadMap { position:relative; float:right; width:50px; height:50px; margin-bottom:7px; border-radius:50%; font-size:0; background:#00ad51}
.roadMap:after { content:''; display:block; width:15px; height:22px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); background:url(../../../images/sf/common/icon.png) no-repeat -202px -63px}

/* 프로그램 만족도 */
.satisfy { display: flex;}
.satisfy .total { flex:1; color:#565656; font-weight: 300;}
.satisfy .total i { display:inline-block; width:31px; height:30px; margin-right:8px; background:url(../../../images/sf/common/icon.png) no-repeat -164px -87px}
.satisfy .total strong { font-size: 30px; font-weight: 700; line-height: 30px;}
.satisfy .detail { flex:6}
.satisfy .detail .progressbar li { display: inline-block; width:33%; font-size:15px; font-weight: 300; line-height: 21px;}
.satisfy .detail .progressbar li .bar { position: relative; display: inline-block; width:115px; height:15px; margin:3px 5px; border-radius: 8px; overflow: hidden; vertical-align: top; background:#e7e7e7 }
.satisfy .detail .progressbar li .bar span { display: block; position:absolute; top:0; left:0; height:100%; border-radius: 8px; background:#d83750}
.satisfy .detail .btnArea { margin:10px 0 5px; text-align: left;}
.satisfyBox { margin-top:7px; padding:15px 20px; border:1px solid #dcdcdc; background:#eee;}
.satisfyBox .starRating:after,
.satisfyList .starRating:after { content:''; clear:both; display:block}
.satisfyBox .starRating li { float:left; width:20%;}
.satisfyList .starRating li { float:left; width:25%; line-height: 35px;}
.satisfyBox .starRating span,
.satisfyList .starRating span { display:inline-block; vertical-align: top}
.satisfyBox .starRating .title,
.satisfyList .starRating .title { position:relative; margin-right:15px; padding-left:15px; font-weight: 300;}
.satisfyBox .starRating .title:after,
.satisfyList .starRating .title:after { content:''; display: block; position:absolute; top:50%; margin-top:-3px; left:0; width:6px; height:6px; background:#0f8d45}
.satisfyList { border-top:1px solid #353e4d}
.satisfyList>li:after { content:''; clear:both; display:block;}
.satisfyList>li { border-bottom:1px solid #cfcfcf}
.satisfyList>li:after { content:''; clear:both; display:block;}
.satisfyList .userInfo { position:relative; float:left; width:15%; padding:10px 15px 10px 50px;}
.satisfyList .userInfo i { position: absolute; top:50%; left:7px; margin-top:-15px; width:29px; height:30px; background:url(../../../images/sf/common/icon.png) no-repeat}
.satisfyList .userInfo i.type1 { background-position: -240px -383px;}
.satisfyList .userInfo i.type2 { background-position: -271px -383px;}
.satisfyList .userInfo i.type3 { background-position: -302px -383px;}
.satisfyList .userInfo span { display:block; color:#565656; font-weight: 300;}
.satisfyList .userInfo .date { font-size:15px;}
.satisfyList .starRating { float:left; width:85%; padding:15px;}
.satisfyList dl { width:100%}
.satisfyList dt { float:left; width:15%; padding:0 20px; color:#717171; font-size:15px; font-weight: 300; line-height:32px; background:#e4e4e4}
.satisfyList dd { float:left; width:85%; padding:0 26px; line-height: 32px; background:#f1f1f1}

/* 시설후기 */
.reviewBox { padding:10px; background:#eee;}
.reviewBox .starRating { margin:5px 0 10px; text-align:center;}
.reviewBox .starRating .itemRating { display:inline-block; width:31px; height:30px; margin:0 2px; background: url(../../../images/sf/common/icon.png) no-repeat -164px -87px}
.reviewBox .starRating .itemRating.outline { background-position-x: -197px; cursor: pointer;}
.reviewBox .starRating .itemRating.half { background-position: -205px -297px; cursor: pointer;}
.reviewBox .writeArea { padding:20px 10px 15px; background:#fff}
.reviewBox .writeArea textarea { width:calc(100% - 333px); height:35px; resize:none;}
.reviewBox .writeArea .button.icon { padding:0 15px}
.reviewList { border-top:2px solid #cfcfcf}
#subContent .reviewList h4.reviewTl{ background: #f3f3f3; padding: 5px 10px 8px; margin: 0}
.reviewList>li { border-bottom:1px solid #cfcfcf}
.reviewList>li:after { content:''; clear:both; display:block}
.reviewList .fl { width:170px; padding:10px 0 0 10px;}
.reviewList .fl span { display:block; color:#686868}
.reviewList .fl .date { font-size:15px; font-weight: 300;}
.reviewList .fl .rating .itemRating { display:inline-block; width:16px; height:15px; background: url(../../../images/sf/common/icon.png) no-repeat -146px -97px}
.reviewList .fl .rating .itemRating.outline { background-position-y: -114px; cursor: pointer;}
.reviewList .fl .rating .itemRating.half { background-position-y: -131px; cursor: pointer;}
.reviewList .fr { width:calc(100% - 170px)}
.reviewList .fr .writeArea { padding:10px 10px 0 0}
.reviewList .fr .writeArea textarea { width:calc(100% - 366px); height:35px; color:#686868; resize:none;}
.reviewList .fr .writeArea textarea:read-only { outline: 0;}
.reviewList .comment { margin-top:15px;}
.reviewList .comment:after { content:""; clear:both; display: block;}
.reviewList .comment>span { float:right; margin-right:10px; border:1px solid #a3aab8; height:35px; line-height:33px; font-size: 15px; padding:0 15px 0 12px; color:#686868; font-weight: 300; background:#fff}
.reviewList .comment>span:before { content:''; display:inline-block; width:16px; height:17px; margin-right:5px; margin-top:-4px; vertical-align:middle; background: url(../../../images/sf/common/icon.png) no-repeat -180px 0}
.reviewList .comment ul { float:left; width:100%; margin-top:10px;}
.reviewList .comment li { padding:10px; border-top:1px solid #c5e0d0;  background:#f5fbf7}
.reviewList .comment .btnArea { float:right; margin:0;}
.reviewList .comment li span { display:inline-block; color:#686868}
.reviewList .comment .commTxt { display:block;}
.reviewList .comment .date { font-size:15px; margin-left:15px; }
.reviewList .comment .commWrite { margin-top:10px; padding:10px; border:1px solid #cfcfcf; background:#fff }
.reviewList .comment .commWrite .inputData { border:0; height:30px; line-height:30px; font-size:15px}



/* 치유큐레이션 */
.curation.thumbList dt { height:38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.boardView .curation { float:left; width:100%; padding:20px 0; border-bottom:1px dashed #d7d8d8; line-height: 1.6;}



/* 자료실/동영상 */
.video.thumbList>li { padding-bottom:25px}
.video.thumbList dl:after { content:''; clear: both; display: block;}
.video.thumbList dt { float:left; width:82%;}
.video.thumbList dd { float:left; width:18%; text-align: right;}
.video.thumbList dd.view:before { content:''; display: inline-block; width:14px; height:11px; margin-right:5px; background: url(../../../images/sf/common/icon.png) no-repeat -326px -302px;}

.boardView .contArea .textBox.videoArea { padding:30px 55px; }
.scenarioBox { overflow-y: auto; height:220px; margin-top:15px; padding:15px; text-align: left; background:#e4e4e4}


/* 농촌교육농장 목록 */
.areaTab { position: relative; margin-bottom:30px; padding:13px 53px 12px; border-radius: 10px; background: #1e9d29;}
.areaTab .swiper { position: static;}
.areaTab a.swiper-slide { border-radius: 5px; line-height: 40px; text-align: center; background:#fff;}
.areaTab a.swiper-slide.active { color:#fff; background:#323232}
.areaTab .areaTab-prev { position: absolute; top:21px; left:15px; display: block; width:23px; height:23px; font-size:0; cursor: pointer; background:url(../../../images/sf/common/icon.png) no-repeat -39px -150px}
.areaTab .areaTab-next { position: absolute; top:21px; right:15px; display: block; width:23px; height:23px; font-size:0; cursor: pointer; background:url(../../../images/sf/common/icon.png) no-repeat -64px -150px}
.eduFarm.thumbList dd { margin-top:10px}
.eduFarm.thumbList .listLine { margin-top:0}
.eduFarm.thumbList .listLine li { padding:0 0 0 10px; color:#323232; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}



/* 농촌교육농장 상세 */
.activity .contArea #bx-pager { display: flex; margin:10px 0 20px; overflow: auto;}
.activity .contArea #bx-pager a { position: relative; height: 132px; margin-right:10px}
.activity .contArea #bx-pager a.active:after { content:''; display: block; position: absolute; top:0; left:0; width: 100%; height: 100%; border:10px solid #fccb48; box-sizing: border-box;}
.activity .contArea #bx-pager a img { height:100%}
.activity .contArea .bx-wrapper { margin-bottom:0; box-shadow: none; border:0; text-align: center;}
.activity .contArea .bx-wrapper img { display: initial;}



/* 치유농업활동 목록 */
.activity.ebookList { padding:0 32px; border-top:0}
.activity.ebookList li { margin-top:0; padding:50px 12px 0; border-bottom:0}
.activity.ebookList li .thumb { position: relative; width:100%; padding:9px;}
.activity.ebookList li .thumb:after { display: none;}
.activity.ebookList li .thumb .cate { display: flex; justify-content: center; align-items: center; flex-direction: column; width:100px; height:100px; border-radius: 100%; top:0; left:50%; line-height: inherit; transform: translate(-50%, -50%); font-size:16px; font-weight: 400; background:var(--krds-light-color-element-primary);}
.activity.ebookList li .thumb .cate:before { content:''; display: inline-block; margin-bottom:5px; background: url(../../../images/sf/common/icon.png) no-repeat;}
.activity.ebookList li .thumb .cate.icon1:before { width:38px; height:36px; background-position: 0 -420px;}
.activity.ebookList li .thumb .cate.icon2:before { width:36px; height:37px; background-position: -41px -420px;}
.activity.ebookList li .thumb .cate.icon3:before { width:39px; height:40px; background-position: -80px -420px;}
.activity.ebookList li dl { width:100%; min-height: auto; padding:15px 10px 85px 10px; line-height: inherit;}
.activity.ebookList li dt { margin-bottom:7px; font-weight: 600; font-size:20px; letter-spacing: -1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.activity.ebookList li dd { height:57px; font-weight: 600;}
.activity.ebookList li dd.btnArea { bottom:0; width:100%; height:auto}
.activity.ebookList li dd.btnArea .button { display: block; height:70px; line-height: 70px; margin-top:0; padding-left:38%; border:0; font-size: 18px; background:linear-gradient(to right, #39be4a, #23507b);}
.activity.ebookList li dd.btnArea .button:hover,
.activity.ebookList li dd.btnArea .button:focus { color:#fff; background:var(--krds-light-color-action-secondary-active)}
.activity.ebookList li dd.btnArea .button.view:after { width:16px; height: 10px; background-position:-162px -107px; transition: margin-left ease 0.3s;}
.activity.ebookList li dd.btnArea .button.view:hover:after,
.activity.ebookList li dd.btnArea .button.view:focus:after { margin-left:20px}



/* 치유농업활동 상세 */
.activityInfo { position:relative; margin-bottom:18px; text-align: center;}
.activityInfo .cate { display:inline-flex; justify-content: center; align-items: center; flex-direction: column; width:100px; height:100px; margin-bottom:15px; border-radius: 100%; color:#fff; background:var(--krds-light-color-element-primary);}
.activityInfo .cate:before { content:''; display: inline-block; margin-bottom:5px; background: url(../../../images/sf/common/icon.png) no-repeat;}
.activityInfo .cate.icon1:before { width:38px; height:36px; background-position: 0 -420px;}
.activityInfo .cate.icon2:before { width:36px; height:37px; background-position: -41px -420px;}
.activityInfo .cate.icon3:before { width:39px; height:40px; background-position: -80px -420px;}
.activityInfo .infoTitle { position: relative; padding-bottom:15px; border-bottom:1px solid #3774d5; box-shadow: 0 2px 0 #e8eff2; font-size:25px; font-weight:600;}
.activityInfo .infoTitle span { position: absolute; top:10px; left:0; font-size:16px; font-weight: 300;}
.activityInfo dl { position: relative; padding:15px 19% 15px 12px; line-height: 1.5; text-align: left;}
.activityInfo dt {  font-size:20px; font-weight:700}
.activityInfo dd .button.download { position: absolute; top:20px; right:0; width:150px; text-align: center;}

.activity.boardView .contArea .infoArea dl:last-child { border-bottom:1px dashed #d7d8d8}
.activity.boardView .contArea h3 { margin-top:50px; margin-bottom:20px; padding-left:0; color:#147a69; font-size:20px; font-weight: 600;}
.activity.boardView .contArea h3:before { top:50%; left:0; width:100%; height:0; background: none; border-bottom:1px dashed #147a69; z-index: -1;}
.activity.boardView .contArea h3 span { display: inline-block; background: #fff;}
.activity.boardView .contArea h3 span:after { content:''; display: inline-block; width:14px; height:13px; margin-left:10px; background: url(../../../images/sf/common/icon.png) no-repeat -203px -312px;}
.activity.boardView .contArea h4 { position: relative; display: inline-block; font-weight:700;}
#subContent .activity.boardView .contArea h4:before { position: absolute; bottom:0; left:0; width:100%; height:5px; background:#fccb48; z-index: -1;}
.activity.boardView .tipBox { position: relative; margin-bottom:50px; padding:20px; border:1px solid #cfd0d9; border-top-color:#147a69; background:#f9fafc}
.activity.boardView .tipBox .tipTitle { position:absolute; top:-40px; left:-1px; padding:0 20px; color:#fff; font-weight: 500; line-height: 40px; border-radius: 10px 10px 0 0; background:#147a69}
.activity.boardView .tipBox .tipTitle:before { content:''; display: inline-block; width:10px; height:15px; vertical-align: middle; margin-right:7px; margin-top:-5px; background: url(../../../images/sf/common/icon.png) no-repeat -243px -250px;}
.activity.boardView .tipBox>strong { display: inline-block; margin-bottom:10px; color:#000; font-weight: 700;}
.activity.boardView .tipBox .listLine>li { color:#323232; font-weight: 300;}
.activity.boardView .imgList { display: flex; flex-wrap: wrap;}
.activity.boardView .imgList li { padding:6px;}
.activity.boardView .imgList li img { width: 100%;}
.activity.boardView .imgList li span { display: block; margin-top:5px}
.activity.boardView .tSimp { margin-bottom:20px; font-size:18px; text-align: center; line-height: 50px; font-weight: 700; background:#d0e4e1}
.imgAativeList { display: flex; flex-wrap: wrap; margin-bottom:40px}
.imgAativeList li { width:calc(25% - 9px); margin-left:12px; margin-bottom:20px }
.imgAativeList li:nth-child(4n+1) { margin-left:0}
.imgAativeList li .thumb { display: block; width:100%; background:#000}
.imgAativeList li .thumb img { width:100%; }
.imgAativeList li .text { position: relative; display: block; padding:20px 15px; font-size:15px; letter-spacing: -1px;}
.imgAativeList li .text + .text { padding:10px 15px; margin-top:-10px; border-top:1px dashed #323232}
.imgAativeList li .num { position: absolute; top:-23px; left:0; width:42px; line-height: 23px; text-align: center; color:#fff; font-weight: 500; background:#d63f43}
.imgAativeList li .num:before { content:''; display: block; position: absolute; top:-10px; left:0; border-right:21px solid transparent; border-left:21px solid transparent; border-bottom:10px solid #d63f43}
.imgAativeList li .num:after { content:''; display: block; position: absolute; bottom:-10px; left:0; border-right:21px solid transparent; border-left:21px solid transparent; border-top:10px solid #d63f43}
.txtAativeList>ol>li { position: relative; margin-bottom:10px; padding-left:34px; line-height: 26px;}
.txtAativeList li .num { position: absolute; top:0; left:0; display:block; width:26px; text-align: center; line-height: 26px; color:#fff; font-weight: 500; border-radius: 100%; background:#d63f43}
.txtAativeList .listLine,
.txtAativeList .listDot { margin-top:0}
.txtAativeList .listLine li { color:#606060; font-size:16px; font-weight: 400;}
.txtAativeList .listDot li { padding-left:6px; color:#686868; font-size:15px; font-weight: 300;}
.txtAativeList .listDot li:before { width:2px; height:2px; background:#686868}



/* 양성기관 */
.insti.thumbList>li { width:33%; padding-top:30px}
.insti.thumbList .thumb { height:160px}
.insti.thumbList dt { margin-bottom:10px; font-size:18px;}
.insti.thumbList dd { margin-top:0; color:#686868; font-size:16px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.instiList li dl.hAuto{ height: auto}
.instiList li dl.hAuto dt{ margin-top: 0}
.instiList li dl.hAuto dd{ display: block; margin: 3px 0}
.instiList li dl.hAuto dd.tel{ border-bottom: 1px dashed #ddd; padding-bottom: 8px; margin-bottom: 8px}

.btnIconList { margin-bottom:50px;}
.btnIconList:after { content:''; display: block; clear:both}
.btnIconList li { float:left; width:calc(25% - 7.5px); margin-left:10px; border:1px solid #a3aab8; border-radius: 10px;}
.btnIconList li:first-child { margin-left:0}
.btnIconList li a { position: relative; display:flex; align-items: center; font-size:18px; font-weight: 600; letter-spacing: -1px;}
.btnIconList li a:after { content:''; display: block; position: absolute; top:50%; right:15px; margin-top:-5px; width:16px; height:10px; background:url(../../../images/sf/common/icon.png) no-repeat -197px -107px}
.btnIconList li i { display:flex; align-items: center; justify-content: center; width:70px; height: 60px; margin-right:12px; border-radius: 10px; background:linear-gradient(to right, #39be4a, #23507b);}
.btnIconList li i:after { content:''; display: block; background: url(../../../images/sf/common/icon.png) no-repeat ;}
.btnIconList li i.icon1:after { width:25px; height:28px; background-position:-190px -353px}
.btnIconList li i.icon2:after { width:30px; height:26px; background-position:-218px -353px}
.btnIconList li i.icon3:after { width:25px; height:25px; background-position:-325px -257px}

.popCont.insti2 .totalEduTime { margin-bottom:20px; padding-bottom:12px; border-bottom:1px dashed #afbbc2; text-align: center; font-weight: 600;}
.popCont.insti2 li .listDot { margin-top:5px}

.instiTelList { text-align:center}
.instiTelList li { display: inline-flex; padding:20px; flex-direction: column; vertical-align: top; color:#000; letter-spacing: -1px;}
.instiTelList li i { display: flex; width:120px; height:120px; margin:0 auto 20px; border-radius: 100%; justify-content: center; align-items: center; background:#e8eff2}
.instiTelList li i:after { content:''; display: block; width:52px; height:47px; background: url(../../../images/sf/sub/icon.png) no-repeat -235px -459px;}
.instiTelList li strong { margin-top:8px; font-size:25px; line-height: 1; }
.instiTelList li .button { width:110px; margin:10px auto 0;}



/*치유농업사 자격 및 시험안내*/
.qualify { margin-top:15px; margin-bottom:40px;}
.qualify>li { position: relative; padding-bottom:45px; padding-left:120px;}
.qualify>li h3 { padding:10px 0 17px; font-size:18px; font-weight: 700;}
.qualify>li h3:before { content:''; display: block; position: absolute; top:0; left:0; width:100px; height:100px; border-radius: 100%; background:#1e9d29;}
.qualify>li h3:after { content:''; display: block; position: absolute; top:20px; left:26px; width:59px; height:55px; background:url(../../../images/sf/sub/icon.png) no-repeat 0 0}
.qualify>li:first-child:after { content:''; display: block; position: absolute; top:0; left:50px; width:2px; height:100%;background:#147a69; z-index: -1; }
.qualify>li:first-child h3:before { background:#147a69}
.qualify>li p { margin-bottom:5px}



/* 치유농업사 소개 */
.hfarmer .roleArea { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom:50px;}
.hfarmer .roleArea li { position: relative; flex:auto; width:246px; margin:65px 5px 0; padding:60px 10px 7px; border:1px solid #c8c8c8; border-radius: 10px; text-align: center; line-height: 22px; background: #f9f9f9;}
.hfarmer .roleArea li i { position: absolute; top:0; left:50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width:100px; height:100px; border-radius: 100%; background:#39be4a ;}
.hfarmer .roleArea li:nth-child(odd) i { background:#147a69}
.hfarmer .roleArea li i:after { content:''; display: block; background:url(../../../images/sf/sub/icon.png) no-repeat}
.hfarmer .roleArea li i.icon1:after { width:30px; height:53px; background-position: 0 -142px;}
.hfarmer .roleArea li i.icon2:after { width:46px; height:45px; background-position: -33px -142px;}
.hfarmer .roleArea li i.icon3:after { width:46px; height:44px; background-position: -82px -142px;}
.hfarmer .roleArea li i.icon4:after { width:45px; height:43px; background-position: -131px -142px;}
.hfarmer .roleArea li i.icon5:after { width:49px; height:49px; background-position: -382px -85px;}
.hfarmer .roleArea li .btnArea { margin:15px 0 0; }
.hfarmer .roleArea li .button { font-weight: 300; letter-spacing: -.5px;}
.hfarmer .roleArea li .button.level1 { color:#323232; background: #cfdfe5;}
.hfarmer .roleArea li .button.level2 { color:#010101; background: #b0cbd6;}
.hfarmer .processArea { margin-top:15px; margin-bottom:50px; display:flex; }
.hfarmer .processArea dl { flex:1; margin-left:32px; overflow: hidden; border:1px solid #c7c7c7; border-radius: 10px; background: #f5f4f4;}
.hfarmer .processArea dl:first-child { margin-left:0}
.hfarmer .processArea dt { padding:25px 20px 15px; font-size:18px; font-weight: 600; text-align: center; background: #fff;}
.hfarmer .processArea dt em { font-size: 20px; font-weight: 900; font-style: italic;}
.hfarmer .processArea dd { margin-left:1px; padding:20px; }
.hfarmer .processArea dd ul { margin-top:0}
.hfarmer .infoArea  { display:flex; flex-wrap:wrap; margin-bottom:60px; border-top:1px solid #c7c7c7}
.hfarmer .infoArea li { position:relative; width:50%; min-height: 152px; padding:30px 50px 30px 162px; border-bottom:1px dashed #afbbc2}
.hfarmer .infoArea li i { position: absolute; top:20px; left:20px; display: flex; justify-content: center; align-items: center; width:122px; height:102px; border-radius: 10px; background:#e8eff2;}
.hfarmer .infoArea li i:after { content:''; display:block; height:34px; background:url(../../../images/sf/sub/icon.png) no-repeat}
.hfarmer .infoArea li i.icon1:after { width:45px; background-position:-339px -198px}
.hfarmer .infoArea li i.icon2:after { width:36px; background-position:-387px -198px}
.hfarmer .infoArea li i.icon3:after { width:32px; background-position:-426px -198px}
.hfarmer .infoArea li strong { display:block; margin-bottom:10px; font-size:18px; font-weight: 600;}
.hfarmer .cancelArea { display: flex;}
.hfarmer .cancelArea dl + dl { margin-left:18px}
.hfarmer .cancelArea dl { flex:1; border-top:1px solid #3774d5}
.hfarmer .cancelArea dt { padding:10px; text-align: center; background:#e8eff2}
.hfarmer .cancelArea dt span { display: inline-block; padding:0 30px; border-radius: 5px; color:#fff; font-size:15px; font-weight: 300; line-height: 30px; background:#3774d5;}
.hfarmer .cancelArea dd { height:calc(100% - 50px); padding:20px; background:#f9f9f9}



/* 치유농업서비스평가 */
.lifeCycleChoice { margin-bottom:40px;}
.lifeCycleChoice p { margin-top:40px; text-align: center; color:#686868; line-height: 22px;}
.lifeCycleChoice ul { display: flex; overflow: hidden; border:1px solid var(--krds-light-color-border-gray); border-radius: 10px; background:var(--krds-light-color-surface-secondary-subtler)}
.lifeCycleChoice li { flex:1; text-align:center; border-left:1px solid var(--krds-light-color-border-gray) }
.lifeCycleChoice li:first-child { border-left:0}
.lifeCycleChoice li a { display: block; padding:8px; color:#000; font-size:18px; font-weight: 300;}
.lifeCycleChoice li a:after { content:''; display: inline-block; width:18px; height:18px; margin:-3px 0 0 9px; vertical-align: middle; background:url(/images/sf/common/icon.png) no-repeat -162px -88px}
.lifeCycleChoice li.active a:after { background-position: -204px -88px;}
.lifeCycleChoice li.active a { color:#fff; font-weight: 700; background:#147a69 }
.lifeCycleChoice li i { display:inline-block; width:61px; height:61px; margin-right:20px; vertical-align: middle; background: url(../../../images/sf/common/icon.png) no-repeat;}
.lifeCycleChoice li i.child { background-position:0 -292px;}
.lifeCycleChoice li i.schoolchild { background-position: -64px -356px;}
.lifeCycleChoice li i.teenager { background-position: -64px -292px;}
.lifeCycleChoice li i.adult { background-position: -128px -292px;}
.lifeCycleChoice li i.senior { background-position: 0 -356px;}

.lifeCycleSurvey li { display: grid; margin-top:5px; border:1px solid var(--krds-color-light-secondary-20); border-radius: 10px; align-items: center; grid-template-columns: 180px 227px 1fr 110px;}
.lifeCycleSurvey li .title { display: grid; grid-auto-flow: column; justify-content:start; padding:10px; line-height: 21px; font-weight: 200;}
.lifeCycleSurvey li .title strong { margin-right:10px; font-size:18px; font-weight: 400;}
.lifeCycleSurvey .cate { position: relative; height:100%; padding:23px 0 24px 75px; border-radius: 10px 10px 0 10px; font-size:18px; font-weight: 700; background:var(--krds-light-color-surface-secondary-subtler)}
.lifeCycleSurvey .cate:after { content:''; display: block; position:absolute; bottom:0; left:10px; height:56px; background:url(../../../images/sf/sub/ico_lifecycle.png) no-repeat;}
.lifeCycleSurvey .cate.icon1:after { width:54px; background-position: 0 0;}
.lifeCycleSurvey .cate.icon2:after { width:48px; background-position: -57px 0;}
.lifeCycleSurvey .cate.icon3:after { width:63px; background-position: -108px 0;}
.lifeCycleSurvey .cate.icon4:after { width:46px; background-position: -174px 0;}
.lifeCycleSurvey .cate.icon5:after { width:46px; background-position: -223px 0;}
.lifeCycleSurvey .cate.icon6:after { width:46px; background-position: -272px 0;}
.lifeCycleSurvey .cate.icon7:after { width:46px; background-position: -321px 0;}
.lifeCycleSurvey .cate.icon8:after { width:59px; background-position: -370px 0;}
.lifeCycleSurvey .cate.icon9:after { width:57px; background-position: -432px 0;}
.lifeCycleSurvey .lifeCycle { padding:5px 10px 0 10px; }
.lifeCycleSurvey .button {  display: flex; justify-content: center; align-items: center; }
.lifeCycleSurvey .button.view:after { content:''; display: inline-block; margin-left:10px; width:13px; height:9px; background:url(../../../images/sf/common/icon.png) no-repeat -181px -108px}

.surveryWrite .title { position: relative; margin-bottom:20px;}
.surveryWrite .title:before { content:''; display:inline-block; height:56px; margin:0 auto; background: url(../../../images/sf/sub/ico_lifecycle.png) no-repeat;}
.surveryWrite .title.icon1:before { width:54px; background-position: 0 -59px;}
.surveryWrite .title.icon2:before { width:48px; background-position: -57px -59px;}
.surveryWrite .title.icon3:before { width:63px; background-position: -108px -59px;}
.surveryWrite .title.icon4:before { width:46px; background-position: -174px -59px;}
.surveryWrite .title.icon5:before { width:46px; background-position: -223px -59px;}
.surveryWrite .title.icon6:before { width:46px; background-position: -272px -59px;}
.surveryWrite .title.icon7:before { width:46px; background-position: -321px -59px;}
.surveryWrite .title.icon8:before { width:59px; background-position: -370px -59px;}
.surveryWrite .title.icon9:before { width:57px; background-position: -432px -59px;}
.surveryWrite .title h3 { display:inline-block; font-size: 20px; font-weight: 700;}
.surveryWrite .title h3 span { display: block; color:#147a69; font-size: initial; font-weight: initial;}
.surveryWrite .title>div { position: absolute; bottom: 0; right:0}
.surveryWrite dl { margin-bottom:14px; }
.surveryWrite dt { position:relative; padding:15px 20px; line-height: 28px; border:1px solid #b9d8dd; border-radius: 10px; font-size:18px; background:#edf6f8}
.surveryWrite dt .choice { display: inline-block; margin-left:10px; font-size:15px; color:#656565; font-weight: 300;}
.surveryWrite dt span.num { color:#97bfc5; font-size:20px; font-weight: 900; font-style: italic; line-height: 1; margin-right:12px}
.surveryWrite dd { padding:15px 20px 15px 60px; }
.surveryWrite dd.krds-check-area { padding:15px 50px; gap:0 80px; flex-wrap: wrap;}

.surveryWrite dd .groupList + .groupList { margin-top:10px; padding-top:10px; border-top:1px dashed #656565}
.surveryWrite dd .checkGroup { display:none; margin-left:25px; margin-top:5px; color:#787878; font-size:15px; font-weight: 300; line-height:30px;}
.surveryWrite dd .checkGroup span { display:inline-block; margin-right:20px; }
.surveryWrite dd .checkGroup span:before { content:'-'; display:inline-block; margin-right:5px;}
.surveryWrite dd .checkGroup .inputData { height:30px; width:75px; min-width:auto; margin-left:10px;}
.surveryWrite dd input[type="checkbox"]:checked + label + .checkGroup,
.surveryWrite dd input[type="radio"]:checked + label + .checkGroup { display: block;}
.surveryWrite dd .listS label { width:110px; display:inline-block; line-height:35px;}
.surveryWrite dd .goJump { position: absolute; right:10px; bottom:15px; color:#d83750; font-weight: 300;}
.surveryWrite dd.score { position: absolute; top:0; right:30px; padding-left:0; border-bottom: 0; color:#656565; line-height: 27px;}
.surveryWrite dd.score strong { display:inline-block; font-size:20px; line-height: 27px;}
.surveryWrite .totalScore { padding:40px 0 15px; font-size:20px; font-weight: 300; text-align: center; border-bottom:1px solid var(--krds-light-color-divider-secondary)}
.surveryWrite .totalScore strong { display:block; font-size:25px; font-weight: 500;}
.surveryWrite .totalScore strong:before { content:''; display: block; width:70px; height:62px; margin:0 auto 15px; background:url(../../../images/sf/sub/imgScore.png) no-repeat 0 0}
.surveryWrite dd .gridDetail th, .surveryWrite dd .gridDetail td { font-size:15px}
.surveryWrite dd .gridDetail td span { display:inline-block; margin-right:20px}



/* 치유농업기본방향 */
.visionArea { counter-reset:chapter}
.visionArea .group { margin-bottom:70px}
.visionArea .group h3 { width:100%; margin-bottom:20px; font-size:20px; font-weight: 700; text-align: center;}
.visionArea .group h3:after { content:''; display: block; position: relative; width:16px; height:16px; margin:10px auto 0; border-radius: 100%; background:#3774d5;}
.visionArea .vision h3 { margin-bottom:-9px; padding-top:20px}
.visionArea .vision p { width:58%; padding:23px; margin:0 auto; border:3px solid #e3e4e6; border-radius: 40px; font-size:23px; font-weight: 700; text-align: center;}
.visionArea .goal { display: flex; flex-wrap: wrap;}
.visionArea .goal>div { flex:1; text-align: center;}
.visionArea .goal>div + div { margin-left:5px }
.visionArea .goal ul { margin-top:-23px; padding:40px 0 30px; border:3px solid #e3e4e6; border-radius: 10px;}
.visionArea .goal ul:after { content:''; clear: both; display: block;}
.visionArea .goal li { float:left; display: grid; grid-auto-flow: column; width:50%; padding:0 20px; align-items: center; justify-content: center; text-align: left;}
.visionArea .goal li i { display:flex; justify-content: center; align-items: center; width:120px; height: 120px; margin-right: 10px; border-radius: 100%; background:#e8eff2;}
.visionArea .goal li i:after { content:''; display: block; height:68px; background: url(../../../images/sf/sub/icon.png) no-repeat;}
.visionArea .goal li i.icon1:after { width:42px; background-position:-62px 0;}
.visionArea .goal li i.icon2:after { width:65px; background-position:-107px 0;}
.visionArea .goal li i.icon3:after { width:56px; background-position:-175px 0;}
.visionArea .goal li i.icon4:after { width:53px; background-position:-234px 0;}
.visionArea .goal li strong { display: block; font-size:18px; font-weight: 700; margin-bottom:5px;}
.visionArea .goal h4 { display: inline-block; padding:12px 35px; border-radius: 25px; color:#fff; font-size:18px; font-weight: 400; background: linear-gradient(to right, #39be4a, #23507b); }
.visionArea .area { display: flex; flex-wrap: wrap;}
.visionArea .area>div { flex:1;}
.visionArea .area>div + div { margin-left:5px;}
.visionArea .area>div h4 { margin-bottom:5px; text-align: center; color:#fff; font-size:18px; font-weight: 700; line-height: 50px; border-radius: 10px;}
.visionArea .area>div ul { position: relative; height:calc(100% - 55px); padding:20px 30px; border-radius: 10px;}
.visionArea .area>div ul:after { content:''; display:block; position: absolute; bottom:27px; right:25px; height:67px; background:url(../../../images/sf/sub/icon.png) no-repeat}
.visionArea .area .first h4 { background:#1e9abe}
.visionArea .area .first ul { background:#d2ebf2}
.visionArea .area .first ul:after { width:38px; background-position: 0 -72px;}
.visionArea .area .second h4 { background:#3884ae}
.visionArea .area .second ul { background:#d7e6ef;}
.visionArea .area .second ul:after { width:61px; background-position: -41px -72px;}
.visionArea .area .third h4 { background:#3e6fae}
.visionArea .area .third ul { background: #d8e2ef;}
.visionArea .area .third ul:after { width:68px; background-position: -105px -72px;}
.visionArea .area .fourth h4 { background:#5466ac}
.visionArea .area .fourth ul { background:#dde0ee;}
.visionArea .area .fourth ul:after { width:63px; background-position: -176px -72px;}
.visionArea .iconListWrap { margin-top:60px}
.visionArea .iconListWrap h3 { width:100%; margin-bottom:10px; font-size:22px; font-weight: 600; }
.visionArea .iconListWrap h3:before { content:'0'counter(chapter); counter-increment:chapter;  margin-right:15px; font-size:30px; line-height: 1; font-weight: 900; font-style: italic; vertical-align: bottom;}
.visionArea .first h3:before { color:#1e9abe; }
.visionArea .first .iconList i.icon1:after { width:54px; height:50px; background-position:-180px -142px;}
.visionArea .first .iconList i.icon2:after { width:51px; height:49px; background-position:-237px -142px;}
.visionArea .first .iconList i.icon3:after { width:50px; height:42px; background-position:-292px -142px;}
.visionArea .first .iconList i.icon4:after { width:28px; height:48px; background-position:-345px -142px;}
.visionArea .second h3:before { color:#3884ae; }
.visionArea .second .iconList i { background:#3884ae;}
.visionArea .second .iconList i.icon1:after { width:50px; height:47px; background-position:-376px -142px;}
.visionArea .second .iconList i.icon2:after { width:43px; height:45px; background-position:-429px -142px;}
.visionArea .second .iconList i.icon3:after { width:39px; height:44px; background-position:0 -198px;}
.visionArea .third h3:before { color:#3e6fae; }
.visionArea .third .iconList i { background:#3e6fae;}
.visionArea .third .iconList i.icon1:after { width:52px; height:47px; background-position:-42px -198px;}
.visionArea .third .iconList i.icon2:after { width:51px; height:51px; background-position:-97px -198px;}
.visionArea .third .iconList i.icon3:after { width:42px; height:36px; background-position:-151px -198px;}
.visionArea .fourth h3:before { color:#5466ac; }
.visionArea .fourth .iconList i { background:#5466ac;}
.visionArea .fourth .iconList i.icon1:after { width:32px; height:57px; background-position:-196px -198px;}
.visionArea .fourth .iconList i.icon2:after { width:50px; height:41px; background-position:-231px -198px;}
.visionArea .fourth .iconList i.icon3:after { width:52px; height:47px; background-position:-284px -198px;}



/* 치유농업체계도 */
.system .iconList i.icon1:after { width:34px; height:59px; background-position: 0 -459px;}
.system .iconList i.icon2:after { width:54px; height:52px; background-position: -37px -459px;}
.system .iconList i.icon3:after { width:46px; height:47px; background-position: -94px -459px;}
.system .iconList i.icon4:after { width:45px; height:44px; background-position: -143px -459px;}
.system .iconList i.icon5:after { width:41px; height:46px; background-position: -191px -459px;}

.diagramContainer { width: 100%; margin-bottom:80px; text-align: center;position: relative;}
.diagramContainer .innerbox{width: 90%;margin: auto;z-index: 3;}
.diagramContainer .innerbox>span{display:block;width: 200px; padding: 10px 15px;background-color: #39bd4b; margin-left:auto;margin-right:auto;border-radius: 20px;font-weight: 600;margin: 10px auto;}
.diagramContainer .innerbox span:first-child{background: linear-gradient(to right, #39be4a, #23507b); color: #fff;}
.diagramContainer .innerbox span:nth-child(2){float: left;}
.diagramContainer .innerbox2{width:60%; padding:20px; margin: auto;position: relative;}
.diagramContainer .innerbox2 div{display: inline-block;position: relative;}
.diagramContainer .innerbox2 div ul li{width: 200px; padding:10px 15px; margin:55px 0px;border-radius: 20px; color: #fff;}
.diagramContainer .innerbox2 div:nth-child(2){margin-top: 94px;}
.diagramContainer .innerbox2 .leftBox ul li,.diagramContainer .innerbox2 .rightBox ul li:first-child{ background-color: #0c2e4f;}
.diagramContainer .innerbox2 .centerBox ul li:first-child, .diagramContainer .innerbox2 .rightBox ul li:last-child{background-color: #23507b;}
.diagramContainer .innerbox2 .centerBox ul li:last-child,.diagramContainer .innerbox2 .leftBox ul li:last-child{background-color: #3774d5;}
.diagramContainer .innerbox2 .outsideBox{background-color: #147a69;width:142px;padding:10px 15px; position: absolute; right: -200px; top:167px; border-radius: 20px;color:#fff}
.outsideBox::before{content: '';width: 6px;height: 6px;display: block;position: absolute;left:-14px;bottom:12px;border-radius: 50%;border:4px solid #147a69;background-color: #fff;}
.outsideBox::after{content: '';width: 100px;height: 1px;display: block;position: absolute;left:-90px;bottom:18px;background-color: #0c2e4f;z-index: -1;}
.firstBx,.secBx,.thirBx,.lineCenter,.innerbox .lineleft{position: relative;}
.leftBox{float: left;}
.rightBox{float: right;}
.firstBx::before,.secBx::before,.thirBx::before,.innerList li::before{content: ''; width: 9px;height: 9px; display: block;position: absolute; background:linear-gradient(to right, #39be4a, #23507b);border-radius: 50%; left: 46%; top:-7px;border: 3px solid #fff;}
.secBx::before{background:#23507b;}
.thirBx::before{background:#0c2e4f;}
.firstBx span::after,.secBx span::after,.thirBx span::after{content: ''; width: 6px;height: 6px; display: block;position: absolute; background:#fff;border-radius: 50%;border: 4px solid #0c2e4f;right: -14px;bottom: 12px;}
.secBx span::after,.centerBox .firstBx span::after{border:#23507b 4px solid;}
.thirBx span::after,.centerBox .secBx span::after{border:#3774d5 4px solid;}
.rightBox .firstBx span::after,.centerBox .secBx span::after{left: -14px;}
.centerBox .firstBx span::before,.rightBox .secBx span::before{content: ''; width: 6px;height: 6px; display: block;position: absolute; background:#fff;border-radius: 50%;border: 4px solid #23507b;left: -14px;bottom: 12px;}
.leftBox .line1::after{content: ''; width: 527px; height: 148px; border:1px solid #0c2e4f;display: block;position: absolute; top: 20px;left: 50%;z-index: -1;border-right: none;}
.rightBox .secBx::after{display: block;content: ''; width: 1px;height: 160px; background-color: #0c2e4f; position: absolute;bottom: 8px;left: 49%;z-index: -1;}

.leftBox .firstBx span::before{content: '';width: 320px;height: 1px; background-color: #0c2e4f;display: block;right: -320px;position: absolute; bottom:19px}
.leftBox .thirBx span::before{content: '';width: 200px; height: 100px; display: block; position: absolute;border: 1px solid #0c2e4f;top:-80px; right: -101px;z-index: -1;border-top: none;border-right: none;}
.innerList{display: flex; width: 60%; margin: 50px auto 0 auto; position: relative;}
.innerList li{width: 32%; padding:5px 0;border: 4px solid #3774d5; margin:0 3px;position: relative;background-color: #fff;}
.innerList li::before{left: 44%; top:-10px;background: #3774d5;}
.innerList::before{content: '';width: 66%; height: 50px; border: #255877 1px solid ; border-bottom: none; position: absolute;top: -50px; left: 17%;}
.innerbox .lineleft::before,.innerbox .lineleft::after{content: ''; width: 6px;height: 6px; display: block;position: absolute; background-color: #fff; border-radius: 50%;border:4px solid #39bd4b;}
.innerbox .lineleft::before{top:-14px; left:45%;}
.innerbox .lineleft::after{bottom:-14px; left:45%;}
.lineCenter::after{content: ''; width: 1px; height: 450px; display: inline-block; position: absolute; background-color: #0c2e4f; left:50%; z-index: -1;}
.leftBox .line1::before{content: '';display: block;position: absolute;width: 80%; height: 125px; border: 1px solid #38b94c;left: -115px;top:-50px; z-index: -1;border-right: none;}
.innerbox::before{content: ''; display: block;width: 25%; height: 1px; background-color: #38b94c; position: absolute;left: 220px;top:19px; border-bottom: none;border-right: none;}



/* 치유농업 */
/* 치유농업이란 */
.visionWrap { margin-bottom: 70px; text-align: center;}
.visionWrap h2 { display: inline-block; margin-top:70px; padding:16px 80px; font-size:23px; font-weight: 600; color:#fff; border-radius: 30px; background:#147a69;}
.vision { padding-top:20px; }
.vision li { position: relative; display: inline-block; width:153px; margin:0 30px; vertical-align: top; font-size:20px}
.vision li:before { content:''; display: block; position: absolute; top:70px; right:-40px; width:12px; height:12px; border-top:2px solid #3774d5; border-right: 2px solid #3774d5; transform: rotate(45deg);}
.vision li:after { content:''; display: block; position: absolute; top:76px; right:-40px; width:20px; height:2px; background: #3774d5;}
.vision li strong { font-weight: 600; color:#3774d5}
.vision li span { font-size:16px; display: block;}
.vision li i { display: flex; justify-content: center; align-items: center; width:153px; height:153px; margin-bottom:10px; border-radius: 100%; border:5px solid #3774d5}
.vision li i:after { content:''; display: block; background:url(../../../images/sf/sub/icon.png) no-repeat}
.vision li .icon1:after { width:62px; height:67px; background-position:-290px 0;}
.vision li .icon2:after { width:67px; height:65px; background-position:-355px 0;}
.vision li .icon3:after { width:66px; height:65px; background-position:-242px -71px;}
.vision li .icon4:after { width:68px; height:67px; background-position:-311px -71px;}
.vision li:nth-child(even):before { border-color:#23507b}
.vision li:nth-child(even):after { background:#23507b}
.vision li:nth-child(even) i { border-color:#23507b }
.vision li:nth-child(even) strong { color:#23507b }
.vision li:last-child:before,
.vision li:last-child:after { display: none;}
.feature { position:relative; display: flex; padding-top:98px; flex-wrap: wrap;}
.feature::before { content:''; display: block; position: absolute; top:5px; left:0; width:100%; height:120px; background: url(../../../images/sf/sub/bgArrow.png) no-repeat 50% 0; }
.feature li { position: relative; display: flex; flex-direction: column; justify-content: space-between; width:calc(25% - 8px); margin:0 4px; padding:35px 20px 10px; font-size:20px; font-weight: 600; letter-spacing: -1px; }
.feature li:before { content:''; display: block; position: absolute; top:0; left:0; width:100%; height:100%; border-radius: 10px; box-sizing: border-box; border:2px solid transparent; background-origin: border-box; background-clip: content-box, border-box; z-index: -1;}
.feature li:after { content:''; display: block; position: absolute; top:50%; left:-4px; transform: translate(-50%, -50%); width:34px; height:34px; border-radius: 100%; background:#fff url(../../../images/sf/sub/icon.png) no-repeat -661px 0}
.feature li:first-child:after { display: none;}
.feature li span { display: block; margin-top:5px; font-size:16px; font-weight: 500; }
.feature li i { display:block; height:102px; margin:0 auto; background: url(../../../images/sf/sub/icon.png) no-repeat;}
.feature li.icon1 i { width:122px; background-position: 0 -354px;}
.feature li.icon2 i { width:122px; background-position: -125px -354px;}
.feature li.icon3 i { width:112px; background-position: -250px -354px;}
.feature li.icon4 i { width:114px; background-position: -365px -354px;}
.feature li.icon1:before { background-image: linear-gradient(#dbf4f8, #dbf4f8), linear-gradient(to bottom, #23507b, transparent 60%)}
.feature li.icon2:before { background-image: linear-gradient(#daf5f5, #daf5f5), linear-gradient(to top, #26527d, transparent 60%)}
.feature li.icon3:before { background-image: linear-gradient(#d9f6f1, #d9f6f1), linear-gradient(to bottom, #147a69, transparent 60%)}
.feature li.icon4:before { background-image: linear-gradient(#dbf7ec, #dbf7ec), linear-gradient(to top, #197d6c, transparent 60%)}
.policyWrap { display: flex; flex-wrap: wrap; }
.policyWrap dl { height:100%; border:1px solid #b9d8dd; border-radius: 10px; background: #edf6f8; }
.policyWrap dl + dl { margin-top:10px}
.policyWrap dt { padding:20px 10px; border-radius: 10px; color:#fff; text-align: center; font-size:20px; font-weight: 600; background:#23507b}
.policyWrap dd { text-align: center;}
.policyWrap dd span { display: inline-block; margin:16px 8px; vertical-align: top; line-height: 1; letter-spacing: -1px;}
.policyWrap dd span i { display:flex; justify-content: center; align-items: center; margin:0 auto 10px; width:110px; height:110px; border-radius: 100%; background:#fff }
.policyWrap dd span i:after { content:''; display: block; background:url(../../../images/sf/sub/icon.png) no-repeat}
.policyArea1 { position: relative; width:100%; margin-bottom:40px; padding:41px;}
.policyArea1:before { content:''; display: block; position: absolute; top:0; left:50%; width:282px; height:282px; border:9px solid #ededed; border-radius: 100%; box-sizing: border-box; transform: translateX(-50%);}
.policyArea1:after { content:''; display: block; position: absolute; top:18px; left:50%; width:246px; height:246px; border:3px solid #ededed; border-radius: 100%; box-sizing: border-box; transform: translateX(-50%); z-index: -1;}
.policyArea1 strong { position: relative; display: flex; flex-direction: column; justify-content: center; width:200px; height:200px; margin:0 auto; border-radius: 100%; font-size:23px; align-items: center; color:#fff; font-weight: 600; background:#147a69;}
.policyArea1 strong:before { content:''; display: block; margin-bottom:10px; width:74px; height:82px; background:url(../../../images/sf/sub/icon.png) no-repeat -425px 0;}
.policyArea1 span { position: absolute; top:50%; width:25%; transform: translateY(-50%); display: block; font-size:20px; font-weight: 700; text-align: center; letter-spacing: -1px;}
.policyArea1 span:before { content:''; display: block; position: absolute; top:calc(50% - 1px); width:45%; height:2px; background:#147a69}
.policyArea1 span:after { content:''; display: block; position: absolute; top:50%; width:15px; height:15px; border-radius: 100%; transform: translateY(-50%); background:#147a69}
.policyArea1 span:nth-of-type(1) { right:50%; margin-right:20%}
.policyArea1 span:nth-of-type(1):before { right:-50%}
.policyArea1 span:nth-of-type(1):after { right:-25px}
.policyArea1 span:nth-of-type(2) { left:50%; margin-left:20%}
.policyArea1 span:nth-of-type(2):before { left:-50%}
.policyArea1 span:nth-of-type(2):after { left:-25px}
.policyArea2 { width:24.5%;}
.policyArea2 dl { height:auto}
.policyArea2 dd span i.icon1:after { width:40px; height:77px; background-position:-502px 0;}
.policyArea2 dd span i.icon2:after { width:60px; height:63px; background-position:-545px 0;}
.policyArea2 dd span i.icon3:after { width:50px; height:48px; background-position:-608px 0;}
.policyArea2 dd span i.icon4:after { width:54px; height:46px; background-position:-434px -85px;}
.policyArea2 dd span i.icon5:after { width:63px; height:43px; background-position:-491px -85px;}
.policyArea2 dd span i.icon6:after { width:51px; height:44px; background-position:-557px -85px;}
.policyArea3 { width:21%; margin-left:4%}
.policyArea3 dl { border:0; background:none}
.policyArea3 dt { position: relative; background:#1e9d29}
.policyArea3 dt:before { content:''; display: block; position: absolute; bottom:-43px; left:calc(50% - 1px); width:2px; height:43px; background:#1e9d29 }
.policyArea3 dt:after { content:''; display: block; position: absolute; bottom:-58px; left:calc(50% - 8px); width:15px; height: 15px; border-radius: 100%; background:#1e9d29;}
.policyArea3 dd { display: flex; flex-direction: column; height:calc(100% - 64px); padding-top:30px; align-items: center; justify-content: center;}
.policyArea3 dd span i { background:#cee9da}
.policyArea3 dd span i.icon1:after { width:65px; height:74px; background-position:-473px -209px;}
.policyArea3 dd span i.icon2:after { width:60px; height:74px; background-position:-475px -132px;}
.policyArea3 dd span i.icon3:after { width:56px; height:70px; background-position:-538px -132px;}
.policyArea3 dd span i.icon4:after { width:93px; height:63px; background-position:-597px -132px;}
.policyArea3 dd span i.icon5:after { width:80px; height:66px; background-position:-611px -63px;}
.policyArea3 dd span i.icon6:after { width:75px; height:60px; background-position:-541px -209px;}
.policyArea4 { width:24.5%; margin-left:1%}
.policyArea4 dd { position: relative; height:calc(100% - 64px); padding:55px 30px 0; border-radius: 0 0 10px 10px; background:#edf6f8 url(../../../images/sf/sub/bgCareFarm7.png) no-repeat 0 100%;  }
.policyArea4 dd span { position: relative; display: block; margin:0; min-height: 136px; padding:20px; border:1px solid #23507b; border-radius: 10px; font-weight: 300; line-height: 20px; text-align: left; background: #fff;}
.policyArea4 dd span + span { margin-top:80px}
.policyArea4 dd span strong { display: block; margin-bottom:10px; font-size:18px; font-weight: 600;}
.policyArea4 dd span:first-child { padding-right:85px}
.policyArea4 dd span:first-child:after { content:''; display: block; position: absolute; bottom:-67px; right:-13px; width:81px; height:141px; background: url(../../../images/sf/sub/icon.png) no-repeat -619px -198px;}
.policyArea4 dd span:before { content:''; display: block; position: absolute; top:calc(50% - 1px); left:-44%; width:44%; height: 2px; background:#23507b ;}
.policyArea4 dd span + span:before { left:-33%; width:33%}
.policyArea4 dd span + span:after { content:''; display: block; position: absolute; top:calc(50% - 85px); left:-44%; width:10.5%; height:170px; border:2px solid #23507b; border-left:0}

/* 치유농업 배경 */
.hbackground { display: flex; flex-wrap: wrap; margin-bottom:55px; padding:10px 0; border:1px solid #c7c7c7; border-radius: 10px; text-align: center; justify-content: center; background:#f9f9f9;}
.hbackground li { position: relative; flex:auto; width:20%; margin:10px 0; font-size:18px; font-weight: 600;}
.hbackground li + li { border-left:1px dashed #a4a4a4}
.hbackground li + li:after { content:'+'; display: block; width:27px; height:27px; position: absolute; top:50%; left:0; transform: translate(-50%, -50%); border-radius: 100%; border:1px solid #b3b3b3; color:#858585; font-size:19px; background: #fff;}
.hbackground li i { display: block; margin:10px auto 0; height:93px; background: url(../../../images/sf/sub/icon.png) no-repeat;}
.hbackground li i.icon1 { width:85px; background-position: 0 -258px;}
.hbackground li i.icon2 { width:85px; background-position: -88px -258px;}
.hbackground li i.icon3 { width:88px; background-position: -177px -258px;}
.hbackground li i.icon4 { width:82px; background-position: -268px -258px;}
.hbackground li i.icon5 { width:102px; background-position: -353px -258px;}
.hbackground li span { display: block; margin-top:20px; letter-spacing: -1px; font-size:15px; font-weight: 300; }

/*국내치유농업 발전단계*/
.history { display: flex; flex-wrap: wrap;}
.history>p { width:100%; margin-top:60px; padding:0 20px; font-size:20px; font-weight: 600; }
.history dl { position: relative; width:calc(33.33% - 20px); margin:45px 5px 0 15px}
.history dl:before { content:''; display: block; position: absolute; top:22px; right:0; width:80%; height:1px; background:#1e9d29}
.history dl:after { content:''; display: block; position: absolute; top:14px; right:0; width:18px; height:18px; border-radius: 50%; background:#1e9d29 url(../../../images/sf/common/icon.png) no-repeat -307px -356px;}
.history dl:last-child:before,
.history dl:last-child:after { display: none;}
.history dt { position: relative; width:170px; height:45px; padding:0 20px; border-radius: 25px; line-height: 45px; font-size:20px; font-weight: 600; color:#fff; letter-spacing: -1px; background:#1e9d29}
.history dd { padding:10px 20px 0}
.history dd strong { font-size:20px; font-weight: 700; color:#1e9d29}
.history dd>ul { margin-top:10px}
.history dd>ul>li { font-size:18px; font-weight: 600;}
.history dd .listDot li { font-size:16px}
.history dl:nth-of-type(2):before,
.history dl:nth-of-type(2):after,
.history dl:nth-of-type(2) dt { background-color: #147a69;}
.history dl:nth-of-type(2) dd strong { color: #147a69;}
.history dl:nth-of-type(3):before,
.history dl:nth-of-type(3):after,
.history dl:nth-of-type(3) dt { background-color:#3774d5}
.history dl:nth-of-type(3) dd strong { color:#3774d5}
.history dl:nth-of-type(4):before,
.history dl:nth-of-type(4):after,
.history dl:nth-of-type(4) dt { background-color: #23507b;}
.history dl:nth-of-type(4) dd strong { color: #23507b;}
.history dl:nth-of-type(5) dt { background-color: #0c2e4f;}
.history dl:nth-of-type(5) dd strong { color: #0c2e4f;}

/* 해외치유농업사례 */
.foreign { display: flex; flex-wrap: wrap; }
.foreign dl { position: relative; width:calc(33.33% - 12px); margin-left:18px; margin-top:20px; padding-bottom: 60px; border:1px solid #c7c7c7; border-radius: 10px;}
.foreign dl:nth-of-type(3n+1) { margin-left:0}
.foreign dt {padding:17px 0; line-height: 29px; font-size:20px; font-weight: 700; text-align:center;}
.foreign dt img { margin-right:10px; vertical-align: top;}
.foreign dd { padding:0 15px; line-height: 20px; font-weight: 300;}
.foreign dd li { line-height: 20px;}
.foreign dd span { display: block; margin-top:10px; padding-top:10px; border-top:1px dashed #d7d8d8; font-size:15px;}
.foreign dd.btn { position: absolute; bottom:0; left:0; width: 100%; padding:0 }
.foreign dd.btn a { display: block; padding:12px 0; border-radius: 10px; font-weight: 400; text-align: center; background:#f0f0f0}



/* 광역치유농업센터 목록 */
.hcenter .roleArea { display: flex; flex-wrap: wrap; margin-bottom:50px;}
.hcenter .roleArea dl { position: relative; flex:1; min-height:217px; margin:0 5px; padding:30px 25px; border:1px solid #23507b; border-radius: 10px; background: #f5f6f8; z-index: 1;}
.hcenter .roleArea dl:after { content:''; display: block; position: absolute; background:url(../../../images/sf/sub/icon.png) no-repeat; z-index: -1; }
.hcenter .roleArea dl.role1:after { width:171px; height:112px; bottom:-2px; right:12px;  background-position:-190px -521px;}
.hcenter .roleArea dl.role3:after { width:187px; height:100px; bottom:-1px; right:10px; background-position:0 -521px }
.hcenter .roleArea dt { display: block; font-size:20px; font-weight: 900; font-style: italic; margin-bottom:10px; }
.hcenter .roleArea dd { display: block; position: relative; padding:5px 0 5px 12px; font-weight: 300; letter-spacing: -1px; text-shadow: 1px 1px 0 #f5f6f8, 1px -1px 0 #f5f6f8, -1px 1px 0 #f5f6f8, -1px -1px 0 #f5f6f8, 2px 0px 0 #f5f6f8, 0px 2px 0 #f5f6f8, -2px 0px 0 #f5f6f8, 0px -2px 0 #f5f6f8;}
.hcenter .roleArea dd:before { content:''; display:block; position: absolute; top:12px; left:0; width:4px; height:4px; border-radius: 100%; background:#393939}

.hcenterList:after { content:''; display: block; clear: both; }
.hcenterList>div { float:left; width:calc(100% - 325px)}
.hcenterList .mapBox { width:305px; margin-right:20px; padding:38px 35px 37px; border:1px solid #c7c7c7; border-radius: 10px; background: #f9f9f9;}
.hcenterList .txtList { padding-top:10px; border-bottom:1px solid #c7c7c7}
.hcenterList .txtList li { padding:12px 0 11px; border-bottom:1px dashed #d7d8d8}
.hcenterList .txtList li:last-child { border-bottom:0}
.hcenterList .txtList li .thumb { width:175px; height:100px}
.hcenterList .txtList li .thumb + dl { width:calc(100% - 195px)}
.hcenterList .txtList li dt { margin-top:0}
.hcenterList .txtList li dd { margin-top:15px}
.hcenterList .txtList li dd.info { margin-top:7px}
.hcenterList .txtList li dd.info span { font-size:16px; color:#686868}
.hcenterList .txtList li dd.info span + span { margin-left:55px;}
.hcenterList .txtList li dd a.ico_blank:after { margin-left:15px}



/* 광역치유농업센터 상세 */
.boardView.hcenter .titleArea {  justify-content: center; align-items: center; background: var(--krds-light-color-surface-secondary-subtler);}
.boardView.hcenter .titleArea h3 { flex:none; background:none}
.boardView.hcenter .titleArea h3:before { width:38px; height:28px; background-position: -128px -356px;}
.boardView.hcenter .titleArea span { position: absolute; top:25px; right:25px; color:#686868; font-weight: 300;}



/* 회원 공통 */
.usrJoinHead { position: relative; padding:50px 0 20px; text-align:center; border-bottom:5px solid transparent; border-image: linear-gradient(90deg, #39be4a, #23507b); border-image-slice: 1; background:#e5eff1 url(../../../images/sf/common/bgVisual_C.png) no-repeat 50% 100%}
.usrJoinHead:before { content:''; display: block; position: absolute; top:0; left:0; width: 452px; height:100%; background:url(../../../images/sf/common/bgVisual_L.png) no-repeat 0 100%}
.usrJoinHead:after { content:''; display: block; position: absolute; top:0; right:0; width: 463px; height:100%; background:url(../../../images/sf/common/bgVisual_R.png) no-repeat 0 100%}
.usrJoinHead h1 { position: relative; z-index: 1;}
.usrJoinHead h1 a { display:inline-block;  width:170px; height: 50px; vertical-align: top; font-size: 0; background: url(../../../images/sf/common/h1Logo.png) no-repeat 0 0;}
.joinH2 { margin-bottom:55px; text-align: center; font-size: 35px; font-weight:500; color:#000; padding-top: 15px; letter-spacing: -1px;}
.joinH2 strong { font-weight: 600;}
.joinH2 strong span { color:#188f58; font-weight: 900;}
.joinH2>span { display: block; font-size: 20px; color: #323232; margin-top: 5px}
.joinH2 i { display: block; width:184px; height:134px; margin:0 auto 20px; background:url(../../../images/sf/sub/icon.png) no-repeat -366px -462px }
.usrJoinHead + #container { padding-top:0}

.usrJoinHead.mypage { border-bottom: 0;}
.navWrap .userInfo { position: absolute; top:17px; right:20px; font-size:18px; color:#fff}
.navWrap .userInfo span { color:#fffc00; font-weight: 600;}



/* 회원정보 */
.myInfoWrap { margin-bottom:35px; text-align: center;}
.myInfoWrap i { display:inline-flex; justify-content: center; align-items: center; width:95px; height: 95px; margin-bottom:10px; border-radius: 100%; background:#eef1f3}
.myInfoWrap i:after { content:""; display:block; width:44px; height:50px; background:url(../../../images/sf/sub/icon.png) no-repeat -553px -462px}
.myInfoWrap .myInfo { font-size:25px; font-weight: 500; color:#000; letter-spacing: -1px;}
.myInfoWrap .myInfo span { font-weight: 200; }
.myInfoWrap>ul { margin-top:20px}
.myInfoWrap>ul li { display: inline-block; min-width: 320px; vertical-align: top; padding:10px 15px; border:1px solid #cacaca; border-radius: 10px; background:#fbfbfb;}
.myInfoWrap>ul li a { display: none; }
.myInfoWrap>ul li label { margin-right:10px; line-height: 30px; cursor: pointer; letter-spacing: -1px;}
.myInfoWrap>ul li input[type='checkbox'] + label:before { content:''; display: block; width:18px; height:18px; margin: 0 auto !important; background:url(../../../images/sf/common/icon.png) no-repeat -162px -88px}
.myInfoWrap>ul li.active { border:0; padding:11px 16px; background:linear-gradient(90deg, #39be4a, #23507b)}
.myInfoWrap>ul li.active label { color:#fff; font-size:18px; font-weight: 700;}
.myInfoWrap>ul li.active a { display: inline-block; padding:0 20px; vertical-align: top; font-size:15px; line-height:30px; background: #fff; }
.myInfoWrap>ul li.active input[type='checkbox']:checked + label:before { background-position: -204px -88px;}
.myInfoWrap p { margin-top:25px; font-size:15px; font-weight: 500; color:#d63f43;}
.myInfoWrap .testDate { display: flex; justify-content: center; align-items: flex-end; margin-top:20px; gap:5px}
.myInfoWrap .testDate:after { content:''; display:block; position: relative; width:120px; height:72px; margin-left:-31px; background:url(../../../images/sf/sub/icon.png) no-repeat -520px -828px}
.myInfoWrap .testDate dl { position: relative; margin-right:38px; padding:0 12px 0 20px; border-radius: 27px 27px 0 0; text-align: left; color:#fff; letter-spacing: -1px; background:#39be4a}
.myInfoWrap .testDate dl:after { content:''; display:block; position:absolute; bottom:0; right:-38px; width:38px; height:40px; border-radius:0 10px 0 0; background:#39be4a}
.myInfoWrap .testDate dt { position: relative; padding:6px 13px; border-bottom:1px solid #fff; font-size:19px; font-weight: 500; }
.myInfoWrap .testDate dt strong { color:#fcff00}
.myInfoWrap .testDate dt .state { position: absolute; top:-4px; right:-12px; width:42px; height:35px; letter-spacing: -1px; color:#fff; font-size:15px; font-weight: 200; text-align: center; line-height: 24px; z-index: 1;}
.myInfoWrap .testDate dt .state:before { content:''; display: block; position: absolute; top:0; left:0; width:100%; height:100%; clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 70%, 0 100%); z-index: -1;}
.myInfoWrap .testDate dt .state:after { content:''; display: block; position: absolute; top:0; left:-5px; border-bottom:4px solid; border-left:6px solid transparent; z-index: -2;}
.myInfoWrap .testDate dt .state.bgBlue:before { background: #3774d5;}
.myInfoWrap .testDate dt .state.bgBlue:after { border-bottom-color: #104aa6;}
.myInfoWrap .testDate dt .state.bgRed:before { background: #d63f43;}
.myInfoWrap .testDate dt .state.bgRed:after { border-bottom-color: #b12428;}
.myInfoWrap .testDate dd { padding:7px 13px; font-size: 18px; font-weight: 600; }
.myInfoWrap .testDate ul { display: flex; justify-content: center; margin-top:1px; padding:0 10px; border-bottom:1px solid #99dda2; background:#c3ebc8}
.myInfoWrap .testDate li { position: relative; padding:0 17px;}
.myInfoWrap .testDate li:after { content:''; display: block; position: absolute; top:50%; left:0; margin-top:-7px; width:1px; height:13px; background:#53c460}
.myInfoWrap .testDate li:first-child:after { display: none;}
.myInfoWrap .testDate li a { display: block; font-size:15px; line-height: 39px; letter-spacing: -1px; }
.myInfoWrap .testDate div:nth-child(even) dl,
.myInfoWrap .testDate div:nth-child(even) dl:after { background:#147a69}
.myInfoWrap .testDate div:nth-child(even) ul { border-bottom-color:#86bbb2; background:#b8d7d2}
.myInfoWrap .testDate div:nth-child(even) li:after { background:#38897a}

.mypage.subtab_btn { margin:0 0 17px 0}
.mypage.subtab_btn li a { line-height: 43px;}
.acquire { position: relative; float: left; top:3px; margin-left:245px; padding-left:30px; font-size:18px; color:#323232; font-weight: 500; letter-spacing: -1px;}
.acquire:before { content:''; display:block; position: absolute; top:50%; left:0; transform: translateY(-50%); width:22px; height:29px; background: url(../../../images/sf/common/icon.png) no-repeat -167px -353px;}
.acquire strong { color:#1e9d29; font-weight:700}



/* 치유농업사 자격시험 */
.myTestInfo h3 { position: relative; margin-bottom: 10px; border-bottom:1px dashed #c4d7d1}
.myTestInfo h3 span { display: inline-block; padding:0 20px; border-radius: 10px 10px 0 0; font-weight: 500; font-size: 17px; line-height: 35px; background:#e1efeb}
.boxList { display: flex; gap:20px; flex-wrap: wrap; margin-bottom:45px;}
.boxList li { position: relative; width:calc(25% - 15px); border-radius: 10px; border:1px solid #cacaca;}
.boxList li.hover .button { display: none; position: absolute; bottom:0; left:50%; transform: translateX(-50%); z-index: 1;}
.boxList li.hover:hover { border-color:#3774d5}
.boxList li.hover:hover:after { content:''; display: block; position: absolute; top:0; left:0; width:100%; height:100%; border-radius: 10px; background:rgba(255,255,255,.6) }
.boxList li.hover:hover .button { display: inline-block}
.boxList dl { padding:18px 20px; }
.boxList dt { margin-bottom:10px; font-size:18px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; letter-spacing: -1px;}
.boxList dt.ico_file:before { content:''; display: inline-block; width:15px; height:16px; margin:3px 3px 0 0; vertical-align: top; background:url(../../../images/sf/common/icon.png) no-repeat -101px -23px }
.boxList dt span { display: block; font-size:16px; font-weight: 500;}
.boxList dt .state { display: inline-block; margin-left:5px; padding:0 10px; border-radius: 5px; color:#fff; line-height: 25px; font-size:15px; font-weight: 200; letter-spacing: -.5px;}
.boxList dt a { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.boxList dd { font-size:15px; font-weight: 300;}
.boxList .sort { display: inline-block; padding:0 20px; color:#fff; font-weight: 500; line-height: 35px; background:#9e9e9e}
.boxList .state1 { display: block; border-top:1px solid #cacaca; border-radius: 0 0 10px 10px; color:#fff; font-size:15px; font-weight: 200; text-align: center; line-height: 28px; background:#484848}
.boxList.txt_ac dl { padding:21px 10px 38px 10px}
.boxList.txt_ac dt { margin-bottom: 5px;}
.boxList li .btnArea { display: flex; flex-wrap: wrap; gap: 5px; margin:0 20px 13px}
.boxList li .btnArea::after { display: none}
.boxList li .btnArea .button { min-width: auto;}
.btnArea .button i { display:flex; justify-content: center; align-items: center; position: absolute; top:0; right:0; width:29px; height:28px; min-width: auto; padding:0;}
.btnArea .button i:after { content:''; display: block; width:17px; background:url(../../../images/sf/common/icon.png) no-repeat}
.btnArea .button.ico_print { padding-right: 39px;}
.btnArea .button.ico_print i { background:#484848 }
.btnArea .button.ico_print i:after { height:17px;  background-position:-328px -356px}
.btnArea .button.ico_mail { padding-right: 39px;}
.btnArea .button.ico_mail i {  background:#3774d5}
.btnArea .button.ico_mail i:after { height:13px; background-position:-28px -480px}
.myTestInfo .bgGreen1 { background: #1e9d29;}
.myTestInfo .bgGreen2 { color:#010101; font-weight: 300; background: #39be4a;}
.myTestInfo .bgBlue1 { background: #23507b;}
.myTestInfo .bgBlue2 { background: #3774d5;}
.myTestInfo .bgRed { background: #d63f43;}
.myTestNo { padding:60px 0; text-align: center; font-weight: 500;}
.myTestNo:before { content:''; display: block; width:218px; height:112px; margin:0 auto 10px; background:url(../../../images/sf/sub/icon.png) no-repeat -520px -714px}
.myTestTitle { margin-bottom:20px; padding:0 30px; border:2px solid #147a69; border-radius: 10px; text-align: center;}
.myTestTitle h2 { padding:16px 0; font-size:23px; font-weight: 600;}
.myTestTitle h2 span { display: inline-block; margin-left:18px; font-size:15px; font-weight: 300;}
.myTestTitle ul { margin-bottom:6px; border-top:1px dashed #c4d7d1; background:#ebf4f2;}
.myTestTitle ul:before { content:''; display: block; width:100%; height:1px; background: #fff;}
.myTestTitle li { display: inline-block; padding:10px 45px; color:#010101; font-weight: 300;}
.myTestTitle li strong { font-weight: 600;}
.finalPass { margin:-20px 0 50px; text-align: center;}
.finalPass span { position: relative; display:inline-block; padding:7px 24px 7px 45px; border-radius: 18px; font-size:18px; font-weight: 500; letter-spacing: -1px; background:#ffe5e1}
.finalPass em { position: absolute; top:-10px; left:-24px; width:57px; height:66px; padding-left:15px; color:#fff; font-size:20px; font-weight: 900; text-align: center; line-height: 40px; background:url(../../../images/sf/sub/icon.png) no-repeat -703px -299px}
.finalPass strong { color:#d63f43}
.statePass { position: absolute; top:-1px; right:-1px; width:38px; height:35px; clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 70%, 0 100%); letter-spacing: -1px; color:#fff; font-size:15px; font-weight: 200; text-align: center; line-height: 24px;}

.testResultView { display: none; position: absolute; top:0; left:0; width:100%; padding:0 20px; border:1px solid #cacaca; border-radius: 10px; background:#fff;}
.testResultView ul { display: flex; justify-content: center; border-top:1px solid #d6d6d6; background:#f4f4f4}
.testResultView li { position: relative; padding:12px 35px; font-weight: 500; line-height: 25px; letter-spacing: -1px;}
.testResultView li:before { content:''; display:inline-block; width:14px; height:15px; margin-right:6px; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -28px -463px; }
.testResultView li:after { content:''; display: block; position: absolute; top:50%; left:0; width:1px; height:14px; margin-top:-7px; background:#323232}
.testResultView li:first-child:after { display:none}
.testResultView li strong { display: inline-block; margin-left:20px; color:#cf2732; font-size:20px; font-weight: 600;}
.testResultView .score { padding:15px 0 10px}
.testResultView .score>span { display: inline-block; margin-right:15px; vertical-align:middle; font-weight: 300; }
.testResultView .score strong { font-size:18px; font-weight: 700;}
.testResultView .btnArea { margin:10px 0;}



/* 치유농업사 자격현황 */
.mypage.chkSearchBox { margin-bottom:40px; text-align: left;}
.mypage.chkSearchBox .chkForm { padding:15px 20px 10px}
.mypage.chkSearchBox .title { margin-bottom:10px; font-size:16px}
.mypage.chkSearchBox .chkForm ul { flex-wrap: wrap;}
.mypage.chkSearchBox .chkForm li { width:calc(11.111% - 6px); margin:0 3px 5px 3px; text-align: center;}
.mypage.chkSearchBox li label { font-size:16px;}
.mypage.chkSearchBox .chkForm li label { line-height: 35px;}
.mypage.chkSearchBox .shcForm .inputData { height:35px; width:210px; max-width: none;}
.mypage.chkSearchBox .shcForm .button { height:35px; line-height: 33px; min-width: auto; text-align: center;}



/* 로그인 */
.loginWrap { max-width:500px; margin:0 auto;}
.loginWrap dt { position: absolute; width: 0; overflow: hidden}
.loginWrap dd .inputData { width: 100%; height: 55px; margin-bottom: 5px; padding:0 10px; font-size:16px; line-height: 43px; font-weight: 300; box-sizing: border-box; border: 1px solid #b9d8dd; background: #edf6f8;}
.loginWrap .userLogin { margin-top: 15px; display: block; width:100%; height: 55px; line-height: 55px; background: linear-gradient(90deg, #39be4a, #23507b); color: #fff; cursor: pointer}
.loginWrap .findA { margin-top:10px; padding-top:10px; border-top:1px dashed #afbbc2; text-align: center;}
.loginWrap .findA a { position: relative; display: inline-block; color:#686868}
.loginWrap .findA a + a { margin-left:12px; padding-left:15px; }
.loginWrap .findA a + a:before { content:''; display:block; position: absolute; top:2px; left:0; width:1px; height:15px; background:#686868}
.loginWrap .findA .button { margin-bottom:15px}



/* 아이디/비밀번호찾기 */
.idpwWrap { max-width:644px; margin:0 auto; text-align: center;}
.idpwWrap .tab_content { padding-top:20px;}
.idpwWrap .tab_content i { display:block; margin:0 auto 15px; background:url(../../../images/sf/sub/icon.png) no-repeat}
.idpwWrap .tab_content i.icon1 { width:62px; height:66px; background-position: -482px -393px;}
.idpwWrap .tab_content i.icon2 { width:67px; height:59px; background-position: -547px -393px;}
.idpwWrap .tab_content p { margin-bottom:40px; font-weight: 300; }
.idpwWrap .tab_content .button { max-width: 400px; border:0; background: linear-gradient(90deg, #39be4a, #23507b)}
.idpwWrap dl { max-width: 400px; margin:0 auto}
.idpwWrap dl dt{ position: absolute; width: 0; overflow: hidden}
.idpwWrap dd .inputData { width: 100%; height: 55px; margin-bottom: 5px; padding:0 10px; font-size:16px; line-height: 43px; font-weight: 300; box-sizing: border-box; border: 1px solid #b9d8dd; background: #edf6f8;}



/* 회원가입 */
.joinStep { display:flex; max-width:960px; margin:0 auto 20px; border:1px solid #cacaca; border-radius: 10px; background:#fbfbfb;}
.joinStep li { flex:1; position:relative; border-left:1px solid #cacaca; line-height: 48px; text-align: center; color:#000; font-weight: 300; letter-spacing: -1px;}
.joinStep li:first-child { border-left:0}
.joinStep li:before { content:''; display: inline-block; width:18px; height:18px; margin-right:4px; margin-top:-3px; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -162px -88px}
.joinStep li.active:after { content:''; display:block; position: absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); border-radius: 10px; border:3px solid transparent; box-sizing: border-box; background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #39be4a, #23527a); background-origin: border-box; background-clip: content-box, border-box; z-index: -1; }
.joinStep li.active  { font-size:18px; position: relative; font-weight: 700; z-index: 1}
.joinStep li.active:before { background-position: -183px -88px;}

.agreeDiv{ position: relative; margin-bottom:20px; border:1px solid #c7c7c7; border-radius: 10px; overflow: hidden; background:#f9f9f9}
.agreeDiv h2 { padding:16px 20px; font-size: 22px; font-weight: 600; letter-spacing: -.5px; background: #fff;}
.agreeDiv h2 span { display: inline-block; margin-left:10px; font-size:15px; font-weight: 400; vertical-align: top; line-height: 26px;}
.agreeDiv .agreeInCont { max-height:230px; margin:20px; overflow-y: auto; }
.agreeDiv .agreeInCont * { color:#121212}
.agreeDiv .agreeInCont h1 { margin-bottom:10px; font-size:22px; font-weight: 700;}
.agreeDiv .agreeInCont h3 { margin-bottom:5px; font-size:20px; font-weight: 700; }
.agreeDiv .agreeInCont>p { margin-bottom:20px; font-weight: 300;}
.agreeDiv .agreeInCont>ul { margin-bottom:20px; margin-left:18px;}
.agreeDiv .agreeInCont>ul li { font-size:16px; font-weight: 300; }


.agreeDiv .agreeBox { border-top:1px dashed #afbbc2; padding:12px 20px;}

.joinWrap .btnArea { margin-top:40px}
.joinWrap .btnArea .button.w100 { max-width: 400px; border:0; background:linear-gradient(90deg, #39be4a, #23507b);}
.joinWrap .joinFinish { padding:30px 0 40px}
.joinWrap .joinFinish i { display:block; margin:0 auto 15px; width:81px; height:88px; background:url(../../../images/sf/sub/icon.png) no-repeat -617px -364px}
.joinWrap .joinFinish p { font-size: 20px; text-align: center;}
.joinWrap .myInfoWrap li { width:158px; min-width: auto; height:141px; padding:14px 10px 10px}
.joinWrap .myInfoWrap li label { margin-right:0; font-weight: 500;}
.joinWrap .myInfoWrap li input[type='checkbox'] + label:before { width:86px; height:85px; margin-top:0; margin-right:0; background: url(../../../images/sf/main/mainIcon.png) no-repeat -185px 0;}
.joinWrap .myInfoWrap li:first-child input[type='checkbox'] + label:before { width:85px;  background-position:-90px 0;}
.joinWrap .myInfoWrap li.active { padding:15px 10px 11px}
.joinWrap .myInfoWrap li.active label { font-size:16px; font-weight: 600;}
.joinWrap .myInfoWrap li.active input[type='checkbox']:checked + label:before { background-position:-185px -88px;}
.joinWrap .myInfoWrap li:first-child.active input[type='checkbox']:checked + label:before { background-position: -90px -88px;}
.joinWrap .myInfoWrap p { margin-top:10px}
.joinWrap .myInfoWrap li.trainee input[type='checkbox'] + label:before{ background-position: -284px 0;}
.joinWrap .myInfoWrap li.trainee.active input[type='checkbox']:checked + label:before{ background-position: -284px -88px;}


/* 원서접수 */
.receiptStep { margin-bottom:50px; display: flex; justify-content: center; text-align: center; }
.receiptStep li { display: inline-block; position:relative; width:187px; padding-right:15px; vertical-align: top; font-weight: 500; letter-spacing: -1px;}
.receiptStep li:after { content:''; display:block; position:absolute; top:48px; right:3px; width:15px; height:15px; box-sizing: border-box; border-top:2px solid #e3e4e6; border-right:2px solid #e3e4e6; transform: rotate(45deg);}
.receiptStep li:last-child { width:172px; padding-right:0}
.receiptStep li:last-child:after { display: none;}
.receiptStep li i { display:flex; justify-content: center; align-items: center; margin:0 auto 10px; width:112px; height:112px; border-radius: 100%; background: url(../../../images/sf/sub/icon.png) no-repeat -635px -599px;}
.receiptStep li i:after { content:''; display: block; height:49px; background: url(../../../images/sf/sub/icon.png) no-repeat 0 -636px;}
.receiptStep li i.step1:after { width:42px;}
.receiptStep li i.step2:after { width:53px; background-position-x:-45px;}
.receiptStep li i.step3:after { width:51px; background-position-x:-101px;}
.receiptStep li i.step4:after { width:50px; background-position-x:-155px;}
.receiptStep li i.step5:after { width:50px; background-position-x:-208px;}
.receiptStep li.active  { font-size:20px; font-weight: 700; color:#000; z-index: 1}
.receiptStep li.active:after,
.receiptStep li.disabled:after { border-color:#157b68}
.receiptStep li.active i { background-position-x: -520px;}
.receiptStep li.disabled i { background:#e1efeb}

.allAgreeChk input[type='checkbox'] + label { display: block; margin-right:0; padding:7px 5px; border:1px solid #b9d8dd; font-size:18px; color:#606060; line-height: 34px; text-align: center; background: #edf6f8;}
.allAgreeChk input[type='checkbox'] + label:before { width:20px; height:20px; background-position:-191px -410px;}
.allAgreeChk input[type='checkbox']:checked + label { padding:4px 5px; border:4px solid #1e9d29; font-weight: 700; color:#000; background:#fff}
.allAgreeChk input[type='checkbox']:checked + label:before { background-position-y:-387px;}

/*.receiptBox { position: relative; margin-top:80px; padding:10px 20px 10px 27px; border:1px solid #ddd; border-top-color:#1e9d29; text-align: center; background:#f5f5f5}*/
.receiptBox { position: relative; margin-top:80px; padding:10px 20px 10px 27px; border:1px solid #ddd; border-top-color:#1e9d29; background:#f5f5f5}
.receiptBox i { display:inline-flex; justify-content: center; align-items: center; width:70px; height:70px; margin-right:20px; border-radius: 100%; vertical-align: top; background:#fff;}
.receiptBox i:after { content:''; display: block; width:43px; height:37px; background:url(../../../images/sf/sub/icon.png) no-repeat -600px -462px;}
.receiptBox i.icon2:after { width:30px; height:36px; background-position: -629px -556px;}
.receiptBox>div { display: inline-block; width: calc(100% - 94px); vertical-align: middle; color:#686868; font-size:15px; line-height:25px; font-weight: 300; text-align: left;}
.receiptBox>div strong { font-weight: 600; color:#323232}
.receiptBox>div .listLine li { font-weight: 300; padding:0 0 0 10px; color:#323232}
.receiptBox .inquiryCall { position: absolute; bottom:-20px; left:50%; transform: translateX(-50%); width:300px; letter-spacing: -1px; color:#000; line-height: 40px; border-radius: 20px; background:#39be4a }
.receiptBox .inquiryCall strong { font-size:18px; vertical-align: top;}
.receiptBox2 { margin-bottom:30px}
.receiptBox2>div { margin-top:-20px; padding:30px 20px 10px 27px; border:1px solid #ddd; border-radius: 10px;}
.receiptBox2 i { display:inline-flex; justify-content: center; align-items: center; width:70px; height:70px; margin-right:20px; vertical-align: top; border-radius: 100%; background:#f5f5f5;}
.receiptBox2 i:after { content:''; display: block; width:44px; height:35px; background:url(../../../images/sf/sub/icon.png) no-repeat -646px -462px;}
.receiptBox2 p { display: inline-block; width:calc(100% - 94px); vertical-align: middle; color:#686868; font-size:17px; line-height:25px; font-weight: 400;}
.receiptBox2 p span { display: block; color:#323232; font-size:18px; font-weight: 600; padding-bottom: 8px;}
.receiptBox2 h2 { position: relative; width:100%; padding:13px; letter-spacing:-1px; text-align: center; border-radius: 10px; font-weight: 600; background: #e8eff2; z-index: 1;}
.receiptBox3 { position: relative; padding:20px 20px 20px 28px; border-top:1px dashed #bbb; background:#f5f5f5}
.receiptBox3 i { display:inline-block; width:70px; height:70px; margin-right:40px; padding-left:16px; border-radius: 100%; vertical-align:top; background:#fff;}
.receiptBox3 i:after { content:''; display: block; width:71px; height:55px; background:url(../../../images/sf/sub/icon.png) no-repeat -260px -636px;}
.receiptBox3 i.icon2 { display:inline-flex; justify-content: center; align-items: center; width:70px; height:70px; margin-right:20px; padding-left:0}
.receiptBox3 i.icon2:after { width:42px; height:41px; background-position:-662px -555px}
.receiptBox3>div { display: inline-block; width: calc(100% - 114px); vertical-align: middle; color:#686868; font-size:15px; line-height:25px; font-weight: 300;}
.receiptBox3>div strong { font-weight: 600; color:#323232}
.receiptBox3>div .listLine li { font-weight: 300; padding:0 0 0 10px; color:#323232}

.receiptH2 { padding:20px 0 30px; text-align: center; font-size:20px; color:#000; font-weight: 500; line-height: 30px;}
.receiptH2 strong { color:#188f58; font-weight: 900;}

.receipt_tab_btn { display:flex; flex-wrap: wrap; gap:10px; justify-content: center; margin-bottom:20px;}
.receipt_tab_btn li { position:relative;  width:320px;}
.receipt_tab_btn li a { display: block; line-height: 48px; text-align: center; color:#000; font-weight: 300; border-radius: 10px; border:1px solid #cacaca; background:#fbfbfb}
.receipt_tab_btn li a:before { content:''; display: inline-block; width:18px; height:18px; margin-right:8px; margin-top:-3px; vertical-align: middle; background:url(../../../images/sf/common/icon.png) no-repeat -162px -88px}
.receipt_tab_btn li.active a { font-size:18px; position: relative; padding:0 15px; text-align: left; border:0; line-height: 50px; color:#fff; font-weight: 700; background: linear-gradient(to right, #39be4a, #23527a); z-index: 1}
.receipt_tab_btn li.active a:before { background-position: -204px -88px;}

.testSchedule ul { display: flex; justify-content: center; gap:15px; flex-wrap: wrap; padding:30px 0}
.testSchedule li { display: flex; }
.testSchedule li i { display: flex; justify-content: center; align-items: center; width:100px; height:100px; margin-right:10px; border-radius: 100%; background:#f5f5f5}
.testSchedule li i:after { content:''; display: block; height:38px; background:url(../../../images/sf/sub/icon.png) no-repeat}
.testSchedule li i.icon1:after { width:36px; background-position: -553px -515px; }
.testSchedule li i.icon2:after { width:38px; background-position: -592px -515px; }
.testSchedule li i.icon3:after { width:34px; background-position: -633px -515px; }
.testSchedule li i.icon4:after { width:29px; background-position: -671px -515px; }
.testSchedule li i.icon5:after { width:37px; background-position: -553px -556px; }
.testSchedule li dl { position: relative; width:135px; margin:12px 0; border-bottom:1px dashed #bbb; line-height: 1.4; letter-spacing: -.5px; font-size:15px; }
.testSchedule li dl:after { content:''; display: block; position: absolute; bottom:-9px; right:0; width:16px; height:17px; border-radius: 100%; background:#fff url(../../../images/sf/common/icon.png) no-repeat -147px -133px}
.testSchedule li dt { font-weight: 600;}
.testSchedule li dd { font-weight: 300;}
.testSchedule li:last-child dl { width:80px; border-bottom:0}
.testSchedule li:last-child dl:after { display:none}
.testSchedule li.active i { border:5px solid #cf2732; background:#fff}
.testSchedule li.active dl { color:#cf2732; border-bottom-color:#cf2732}
.testSchedule li.active dl:after { background-position: -207px -430px;}
.testSchedule .testPlace { position: relative; margin-top:20px; text-align: center;}
.testSchedule .testPlace:before { content:''; display: block; position: absolute; top:50%; left:0; width:100%; height:1px; border-top:1px dashed #bbb; z-index: -1;}
.testSchedule .testPlace span { display: inline-block; padding:0 30px; line-height: 40px; border-radius: 20px; color:#fff; font-weight: 600; background:#9e9e9e;}
.testSchedule .btnArea .button { min-width:140px;}
.testScheduleNo { padding:60px 0; text-align: center; font-size:20px; font-weight: 500;}
.testScheduleNo:before { content:''; display: block; width:256px; height:157px; margin:0 auto 10px; background:url(../../../images/sf/sub/icon.png) no-repeat 0 -688px}
.gridDetail .convenCheck dl { padding:0 20px}
.gridDetail .convenCheck dl:after { content:''; clear:both; display: block;}
.gridDetail .convenCheck dt { float:left; width:176px; color:#323232; font-weight: 500; letter-spacing: -1px; line-height:35px;}
.gridDetail .convenCheck dt:before { content:''; display: inline-block; width:4px; height:4px; margin-top:-3px; margin-right:8px; vertical-align: middle; background:#454545}
.gridDetail .convenCheck dd { float:left; width:calc(100% - 176px)}
.gridDetail .convenCheck.receiptBox3 { margin-top:7px; padding:6px 0}
.gridDetail .convenCheck.receiptBox3 dl { padding:6px 20px 6px 15px}

.receiptTitle {margin-bottom:15px; border-radius: 10px; color:#fff; font-size: 20px; font-weight: 600; letter-spacing: -1px; background:#147a69}
.receiptTitle span { position: relative; display: inline-block; width:135px; margin-right:12px; line-height:60px; text-align: center; border-radius: 10px; color:#010101; background:#39be4a;}
.receiptTitle span strong { position: absolute; top:-10px; left:10px; font-size:11px; color:#000; width:33px; height:36px; line-height: 27px; background:url(../../../images/sf/sub/icon.png) no-repeat -593px -556px}
.receiptTitle ul { float:right; padding:18px 0; }
.receiptTitle li { display: inline-block; margin:0 17px; font-size:16px; font-weight: 300; line-height: 24px; vertical-align: top;}
.receiptTitle li strong { color:#ffea00; font-weight:600}
.examKeyboard>li { position: relative; margin-bottom:30px; padding-left:50px; font-size:18px; font-weight: 500; letter-spacing: -1px; line-height: 30px;}
.examKeyboard li em { position: absolute; top:0; left:0; display: inline-block; font-size:30px; font-weight: 900; color:#000; font-style:italic; line-height: 1;}
.examKeyboard li li { margin-top:20px; font-size: 16px;}
.examKeyboard li li:first-child { margin-top:10px}
.examKeyboard li img { max-width: 100%;}

.receiptFinish { padding:25px 0; text-align: center; font-size:20px; font-weight: 300; color:#000}
.receiptFinish:before { content:''; display: block; width:258px; height:151px; margin:0 auto 25px; background:url(../../../images/sf/sub/icon.png) no-repeat -259px -694px}
.receiptFinish strong { display: block; margin-bottom:5px; font-weight: 700;}

.picUploadStep { position: relative; margin-top:25px; margin-bottom:5px; padding:25px 20px 20px; border-top:1px dashed #71a49a; background:#e1efeb}
.picUploadStep h2 { display: inline-block; position: absolute; top:-20px; left:50%; transform: translateX(-50%); padding:0 40px; border-radius: 20px; line-height: 40px; color:#fff; font-weight: 600; background: #147a69;}
.picUploadStep ol { display: flex; gap:10px }
.picUploadStep li { flex:1; display: flex; align-items: center;}
.picUploadStep li em { display: inline-flex; justify-content: center; align-items: center; width:60px; height:60px; margin-right:12px; border-radius: 30px; color:#686868; font-weight: 900; font-style: italic; font-size: 30px; background: #fff;}
.picUploadStep li span { width:calc(100% - 72px)}
.picUploadStep li strong { display: block; margin-bottom:5px;}
.picUploadSch { margin-bottom:20px; padding:12px; border:1px solid #bfbfbf; border-radius: 10px; text-align: center;}
.picUploadSch label { font-weight: 600; margin-right:25px;}
.picUploadWrap .outGrid .picArea .button { margin-bottom:10px}
.picUploadWrap .outGrid .fr { position: relative; width:calc(100% - 225px); height:760px; border:1px solid #bfbfbf}
.picUploadWrap .outGrid .fr .button.crop { position: absolute; bottom:5px; right:10px; padding:0 30px;}
.picUploadWrap .outGrid .fr .button.crop:before{ background-position: -191px -432px; width: 15px; height: 14px;}
.picUploadWrap .picExam { padding:10px; text-align:center; background:#f6f6f6}
.picUploadWrap .picExam img { max-width:100%}
.picUploadWrap .picImgWrap { height:555px; overflow-y: auto; text-align: center;}



/* 시험소개 */
.testIntro .h2Title { margin-top:45px;}
.testIntro p.font18 { font-weight: 500; letter-spacing: -1px; line-height: 26px;}
.testIntro .disqualify { margin-top:25px; }
.testIntro .disqualify>p { margin-bottom:10px;}
.testIntro .disqualify ul { display: flex; gap:10px;}
.testIntro .disqualify li { position: relative; flex:1; padding:20px 12px; border-radius:10px; font-weight: 500; line-height: 25px; background:#e1efeb; z-index: 1;}
.testIntro .disqualify li:after { content:''; display: block; position: absolute; bottom:-6px; right:8px; width:52px; height:60px; background:url(../../../images/sf/sub/icon.png) no-repeat -364px -599px;z-index: -1;}
.testIntro .receiptBox3 { padding-bottom:75px; border-top-color:#323232}
.testIntro .receiptBox3 .ico_blank { position: absolute; bottom:0; left:0; width:100%; padding:17px 10px; color:#010101; font-size:18px; text-align: center; letter-spacing:-.5px; background:#39be4a}
.testIntro .receiptBox3 .ico_blank:after { width:15px; height:15px; background-position: -84px -23px;}
.testIntro .application { display: flex; margin-bottom:16px; gap:20px}
.testIntro .application dl { flex:1; display: flex; align-items:center; gap:20px; }
.testIntro .application dt { display: inline-flex; flex-direction: column; justify-content: center; width:125px; height:125px; border-radius: 100%; text-align: center; font-weight: 600; background:#e1efeb }
.testIntro .application dt:before { content:''; display: block; width:33px; height:43px; margin:0 auto 5px; background:url(../../../images/sf/sub/icon.png) no-repeat -419px -599px}
.testIntro .application dl:last-child dt:before { height:45px; background-position-x: -455px;}
.testIntro .application dd { width:calc(100% - 145px); font-size:18px; }
.testIntro .precautionsWrap:after { content:''; clear:both; display: block;}
.precautionsWrap .precautions { float:left; width:48%; }
.precautionsWrap .precautions:first-child { margin-right:4%}
.precautionsWrap .precautions:last-child { width:100%; margin-top:35px}
.precautionsWrap .precautions h3 { display: inline-block; min-width:207px; padding:0 15px 10px;  border-radius: 10px 10px 0 0; font-weight: 500; line-height: 35px; background:#e1efeb;}
.precautionsWrap .precautions>ul { position: relative; margin-top:-10px; border:1px dashed #acc7bf; border-radius:10px; text-align: center; background: #fff;}
.precautionsWrap .precautions:last-child>ul { padding:15px 17px; border:0; border-top:1px dashed #acc7bf; border-radius: 0; text-align: left; }
.precautionsWrap .precautions span.txt_red { display: block; margin:10px 0 0 30px; font-size:15px;}
.precautionsWrap .precautions li .listDot { margin:5px 0}
.precautions .prepare { display: flex; justify-content: space-evenly; padding:20px 0 15px}
.precautions .prepare i { display: block; height:50px; margin:0 auto 5px; background:url(../../../images/sf/sub/icon.png) no-repeat}
.precautions .prepare i.icon1 { width:57px; background-position:0 -848px;}
.precautions .prepare i.icon2 { width:28px; background-position:-60px -848px;}
.precautions .prepare i.icon3 { width:34px; background-position:-91px -848px;}
.precautions .prepare i.icon4 { width:63px; background-position:-128px -848px;}



/* 응시안내 */
.cautionWrap { position: relative; padding:40px 30px; border-radius: 10px; border:1px solid #c7c7c7;}
.cautionWrap h2 { position: absolute; top:-20px; left:50%; transform: translateX(-50%); width:210px; border-radius: 20px; line-height: 40px; color:#fff; font-size:18px; font-weight: 600; text-align: center; background:#9e9e9e;}
.cautionWrap h3 { display: inline-block; margin-top:15px; line-height: 35px; border-radius: 10px 10px 0 0; padding:0 20px; font-weight: 500; background:#e1efeb}
.cautionWrap .listDot li { font-weight: 500; letter-spacing: -.5px;}
.cautionWrap .listDot .listLine li { font-weight:400; color:#606060}
.cautionWrap .listDecimal { position: relative; margin-bottom: 15px; padding:15px 20px; border-top:1px dashed #c4d7d1; background:#ebf4f2}
.cautionWrap .listDecimal:before { content:''; display: block; position: absolute; top:0; left:0; width:100%; height:1px; background:#fff}
.cautionWrap .listDecimal>li { margin-left:25px; list-style:decimal; font-size:15px; line-height: 25px; }
.cautionWrap .listDecimal .listDot { margin-top:0}
.cautionWrap .listDecimal .listDot li { padding-left:8px; color:#686868; line-height: 20px; font-weight: 400;}
.cautionWrap .listDecimal .listDot li:before { top:11px; width:2px; height:2px; background:#686868}



/* 자원안내 */
.categoryGroup dl { padding-bottom:10px; border-bottom:1px solid #00ad51}
.categoryGroup dl:after { content:""; clear:both; display:block}
.categoryGroup .cateG01 { position:relative; float:left; width:180px;  margin-right:20px;}
.categoryGroup .cateG01:after { content:''; display:block; position:absolute; top:16px; right:20px; width:12px; height:7px; background:url(../../../images/sf/common/icon.png) no-repeat -82px 0;}
.categoryGroup .cateG01 select { color:#fff; width:100%; height: 40px; padding:0 40px 0 20px;  -webkit-appearance:none; appearance:none;  background:#0f8d45}
.categoryGroup .cateG01 select:-ms-expand { display: none;}
.categoryGroup .cateG02 { float:left; width:calc(100% - 200px)}
.categoryGroup .cateG02 label{ display: inline-block; position: relative; min-width:100px; line-height: 38px; margin-right:4px; text-align:center; font-weight:300; color:#686868; cursor: pointer; border:1px solid #ccc; background:#fff}
.categoryGroup .cateG02 input[type='radio']{ display: none;}
.categoryGroup .cateG02 input[type='radio']:checked + label { border:3px solid #0f8d45; color:#0f8d45; font-weight: 500; line-height:34px; background:#f6f6f6}
.categoryGroup .cateG03 { padding:10px; text-align:center;}
.categoryGroup .cateG03 label{ display: inline-block; position: relative; min-width:110px; line-height: 40px; margin:0 5px; text-align:center; font-weight:300; color:#686868; cursor: pointer; background:#e6e6e6}
.categoryGroup .cateG03 input[type='radio']{ display: none;}
.categoryGroup .cateG03 input[type='radio']:checked + label { border:1px solid #0d643a; color:#fff; font-weight: 500; line-height:38px; background:#00ad51}



/* 저작권정책 */
.copyrightType { margin-top:15px; margin-bottom:50px; display:flex; gap:10px }
.copyrightType dl { flex:1; overflow: hidden; border:1px solid #c7c7c7; border-radius: 10px; text-align: center; background: #f5f4f4;}
.copyrightType dl.active { border:2px solid #3774d5}
.copyrightType dt { padding:20px; font-size:18px; font-weight: 600; line-height: 24px; background: #fff;}
.copyrightType dd { padding:20px;  }
.copyrightType dd img { display: block; margin:0 auto 10px; max-width: 100%;}



/* 뷰어다운로드 */
.viewerWrap { margin-bottom:35px; padding:10px 30px; border:1px solid #c7c7c7; border-radius: 10px; }
.viewerWrap li { display: flex; justify-content:space-between; align-items: start; padding:20px 0 20px 8px; border-bottom:1px dashed #d7d8d8}
.viewerWrap li:last-child { border-bottom:0}
.viewerWrap li dl { width:calc(100% - 215px); margin-left:8px; padding-right:20px}
.viewerWrap li dt { margin-bottom: 5px; font-size:18px; font-weight: 600;}
.viewerWrap li .button { width:157px; margin-top:10px; border-radius: 5px; text-align: center;}



/* 찾아오시는길 */
.directionSummary { margin-bottom:15px;}
.directionSummary dt { padding:14px 10px; text-align: center; color:#fff; font-size:22px; font-weight: 200; background:#147a69}
.directionSummary dd { display: flex; flex-wrap: wrap; justify-content:center; align-items: start; padding:25px; border:1px solid #c7c7c7; border-top:0; text-align: center;}
.directionSummary dd span { position: relative; min-width:110px; overflow: hidden; }
.directionSummary dd span:after { content: ''; display: block; position: absolute; top:24px; left:0; width:100%; height:2px; background:#c9c9c9; z-index: -1;}
.directionSummary dd .start,
.directionSummary dd .arrive { font-size: 20px; font-weight: 600;}
.directionSummary dd .start:before,
.directionSummary dd .arrive:before { content:''; display: block; width:12px; height:12px; border-radius: 100%; margin:19px auto 10px; background:#147a69;}
.directionSummary dd .start:after { left:50%}
.directionSummary dd .arrive:after { width:50%}
.directionSummary dd span:nth-child(2n) { margin-top:12px; line-height: 25px; color:#000;}
.directionSummary dd span:nth-child(2n):before { content:''; display: block; position: absolute; top:0; left:50%; transform: translateX(-50%); width:70px; height:25px; margin:0 auto; background:#c9c9c9; z-index: -1;}
.directionSummary dd span:nth-child(2n):after { top:12px}
.directionSummary dd .expressway { font-size:15px;}
.directionSummary dd .expressway i { display: flex; width:50px; height:50px; margin:0 auto; padding-top:6px; justify-content: center; align-items: center; color:#fff; font-weight: 600; background:url(../../../images/sf/sub/icon.png) no-repeat -290px -459px}

.directionDetail { position: relative; margin:0 25px; padding:35px 35px 35px 110px; border-top:1px dashed #d7d8d8}
.tab_content .directionDetail:nth-of-type(1) { border-top:0}
.directionDetail h3 { margin-bottom:10px; font-size:20px; font-weight: 600;}
.directionDetail>i { position: absolute; top:35px; left:15px; background:url(../../../images/sf/sub/icon.png) no-repeat}
.directionDetail>i.icon1 { width:64px; height:56px; background-position:-703px 0;}
.directionDetail>i.icon2 { width:62px; height:60px; background-position:-703px -59px;}
.directionDetail>i.icon3 { width:67px; height:54px; background-position:-703px -123px;}
.directionDetail>i.icon4 { width:65px; height:57px; background-position:-703px -180px;}
.directionDetail>i.icon5 { width:65px; height:55px; background-position:-703px -240px;}
.directionDetail .path { display: inline-block; margin:0 10px 5px 0; padding:9px 15px; border:1px solid #c7c7c7; font-weight: 500; line-height: 20px; letter-spacing: -1px; background: #fff;}
.directionDetail .path span { margin-left:10px; font-weight:400 ;}
.directionDetail .listSq { margin-top:5px;}
.directionDetail .info_txt { margin-left:-100px}
.directionDetail.bg_gray { padding:20px 35px 20px 110px; border-top:0; background:#f6f6f6 !important}
.directionDetail.bg_gray i { top:20px;}
.directionDetail .terminalInfo { display: flex; gap:70px}
.directionDetail .terminalInfo .path { border-color:#b9d8dd; background:#edf6f8}



.surveyInfo { position: relative; padding-top:20px; z-index: 1;}
.surveyInfo:before { content:''; display: block; position:absolute; top:-40px; right:0; width:100%; height:100%; background-repeat:no-repeat; background-position:right 40px top 0; z-index: -1;}
.surveyInfo.bg01 { height:214px; }
.surveyInfo.bg01:before { background-image:url(../../../images/sf/sub/bgSurvery01.png)}
.surveyInfo.bg02 { height:208px; }
.surveyInfo.bg02:before { background-image:url(../../../images/sf/sub/bgSurvery02.png)}
#subContent .surveyInfo h2 { padding-top:0; margin-top:0}
#subContent .surveyInfo h2:before { display: none;}
#subContent .surveyInfo h2 span{ font-size: inherit}
.surveyInfo { letter-spacing: -1px;}
.surveyInfo .btnArea { margin-top:25px; text-align: left;}
.surveyInfo .btnArea .button { padding:0 15px;}

.surveyList:after { content:""; clear:both; display:block;}
.surveyList li { position:relative; float:left; width:calc(25% - 7.5px); margin-left:10px; margin-bottom: 20px; padding:15px; border:1px solid #ccc}
.surveyList li:nth-child(4n+1) { margin-left:0;}
.surveyList .stateWrap { position:absolute; top:-1px; right: -1px;}
.surveyList .stateWrap span { display: inline-block; padding:0 10px; color:#fff; font-size:15px; font-weight: 300; line-height: 35px;}
.surveyList .stateWrap span.pick { background:#00ad51}
.surveyList .stateWrap span.ing { background:#d83750}
.surveyList .stateWrap span.end { background:#434343}
.surveyList dt a { display: block; margin-bottom:10px}
.surveyList dd { position: relative; margin-top:5px; padding-left:23px; font-size:15px; font-weight: 300;}
.surveyList dd:before { content:''; display:block; position: absolute; top:50%; left:0; transform: translateY(-50%); background:url(../../../images/sf/common/icon.png) no-repeat }
.surveyList dd.date:before { width:16px; height:17px; background-position:-200px -169px ;}
.surveyList dd.view:before { width:14px; height:14px; background-position:-217px -151px ;}



/* 치유농업시설이란 */
.listImg:after { content:''; clear: both; display: block;}
.listImg li { float:left; width:calc(33.33% - 13.33px); margin-left:20px; margin-top:20px}
.listImg li:nth-child(3n+1) { margin-left:0}
.listImg li img { width:100%}
.txtIntro { position: relative; display: flex; align-items: center;}
.txtIntro .thumb { position:absolute; top:0; right:0}
.txtIntro p span { display:block; margin-bottom:10px; color:#0f8d45; font-size:25px; letter-spacing: -1px; line-height: 1.3;}
.txtIntro p span strong { display:block; color:#0d643a; font-weight:700}



/* 치유농업의 가치 */
.careFarm9Info { position: relative; margin-bottom:30px; }
.careFarm9Info .infoTitle { position:relative; width:100%; margin-bottom:50px; padding-top:10px; font-size:28px; font-weight: 400; letter-spacing: -2px; text-align: center; }
.careFarm9Info .infoTitle:before { content:''; display:inline-block; width:25px; height:20px; vertical-align: top; margin-right:10px; background:url(../../../images/sf/common/icon.png) no-repeat -308px -235px}
.careFarm9Info .infoTitle:after { content:''; display:inline-block; width:25px; height:20px; vertical-align: bottom; margin-left:10px; background:url(../../../images/sf/common/icon.png) no-repeat -325px -257px}
.careFarm9Info .infoTitle strong { color:#0f8d45}
.careFarm9Info ul { display:flex; flex-wrap:wrap; }
.careFarm9Info li { position:relative; min-height: 150px; font-size:15px; width:calc(50% - 205px); margin:0 20px 10px 185px; padding:15px; border-radius: 10px; background:#daf6cc;}
.careFarm9Info li:after { content:''; display:block; position:absolute; top:0; left:-165px; width:150px; height:150px; background:url(../../../images/sf/sub/imgCareFarm9.png) no-repeat}
.careFarm9Info li.info01:after { background-position:0 0}
.careFarm9Info li.info02:after { background-position:-155px 0}
.careFarm9Info li.info03:after { background-position:-311px 0}
.careFarm9Info li.info04:after { background-position:-467px 0}
.careFarm9Info li.info05:after { background-position:0 -156px}
.careFarm9Info li.info06:after { background-position:-156px -156px}
.careFarm9Info li.info07:after { background-position:-312px -156px}
.careFarm9Info li strong { display:block; font-size:18px;}
.careFarm9Info p { position:absolute; bottom:10px; right:40px; text-align: right; font-size:10px;}



.imgPolicy { position: relative; text-align: center;}
.helpBtnArea{ position: absolute;}
.helpBtnArea.help01 { top:260px; left:74px;}
.helpBtnArea.help02 { top:260px; left:219px;}
.helpBtnArea .button.help{ background: none; font-size: 0; width: 110px; height: 135px;}
.helpBtnArea .helpCont{ display: none; position: absolute; top:140px; left:50%; padding: 3px 5px ; background: #fff; border:1px solid #484848; border-radius: 3px; font-size: 0.8rem; color: #686868; font-weight: 300; z-index: 99; width: 380px; margin-left: -190px}
.helpBtnArea .helpCont:before{ content: ''; display: block; width: 8px; height: 8px; background: #fff; border: 1px solid #484848; border-right: 0; border-bottom: 0; position: absolute; top: -5px; transform: rotate(45deg); left: 50%; margin-left:-4px}



/* 정책 및 지침  */
.lawList:after { content:""; clear: both; display: block;}
.lawList li { position:relative; float:left; width:calc(25% - 11.25px); margin-left:15px; margin-bottom:20px; padding:45px 15px 10px; border:1px solid #d0d0d2}
.lawList li:nth-child(4n+1) { margin-left:0}
.lawList li .type { position:absolute; top:-1px; left:15px; padding:0 10px; color:#fff; font-size:15px; font-weight: 300; line-height: 35px; background:#00ad51}
.lawList li>a { display:block; height:72px; overflow:hidden; margin-bottom:15px; }
.lawList li .dataInfo { padding-top:10px; border-top:1px solid #d0d0d2; text-align:right}
.lawList .dataInfo .button { float:left; padding:0 10px;}
.lawList .dataInfo .button.icon.download:before { margin-top:-3px}
.lawList .dataInfo span { display:inline-block; font-size:15px; color:#686868; font-weight: 300; line-height: 30px;}

.lawCont { display: flex; margin-bottom:10px;}
.lawCont dt { width:354px; padding:25px 30px; color:#fff; font-size:26px; font-weight: 500; line-height: 1; background:#00ad51}
.lawCont dt span { display: block; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.5); font-size:16px; font-weight: 300; line-height: initial;}
.lawCont dd { width:calc(100% - 354px); padding:20px 30px; letter-spacing: -.5px; background:#ecf0f4}
.lawCont:nth-child(odd) { flex-direction: row-reverse;}



/* 치유농업 연구소 */
.labInfo .infoTitle { margin:50px auto 40px; text-align: center; padding-top:0; font-size:28px; font-weight: 400; line-height: 1.4; letter-spacing: -2px;}
.labInfo .infoTitle:before { content:''; display: inline-block; vertical-align: top; margin-right:10px; width:25px; height:20px; background:url(../../../images/sf/common/icon.png) no-repeat -308px -235px}
.labInfo .infoTitle:after { content:''; display: inline-block; vertical-align:bottom; margin-left:10px; width:25px; height:20px; background:url(../../../images/sf/common/icon.png) no-repeat -325px -257px}
.labInfo .infoTitle strong { color:#0f8d45; font-size:28px; font-weight: 700;}
.labInfo .roleArea { display: flex; margin-bottom:50px; padding-top:52px}
.labInfo .roleArea li { position: relative; flex:1; margin:0 5px; padding:170px 10px 20px; border:2px solid #dfdfdf; border-radius: 10px;}
.labInfo .roleArea li i { position:absolute; top:-2px; left:-2px; width:calc(100% + 4px); height:152px; border-radius: 10px; }
.labInfo .roleArea li.role1 i { background:#4f80a5 }
.labInfo .roleArea li.role2 i { background:#75bf55 ;}
.labInfo .roleArea li.role3 i { background:#eee388 ;}
.labInfo .roleArea li.role4 i { background:#ccec5c ;}
.labInfo .roleArea li.role0 i { background:#75bf55 ;}
.labInfo .roleArea li.role5 i { background:#6da3d7 ;}
.labInfo .roleArea li i:after { content:''; display: block; position:absolute; bottom:0; left:0; width:100%}
.labInfo .roleArea li.role1 i:after { height:190px; background:url(../../../images/sf/sub/ico_lab01.png) no-repeat 50% 0 }
.labInfo .roleArea li.role2 i:after { height:181px; background:url(../../../images/sf/sub/ico_lab02.png) no-repeat 50% 0}
.labInfo .roleArea li.role3 i:after { height:165px; background:url(../../../images/sf/sub/ico_lab03.png) no-repeat 50% 0}
.labInfo .roleArea li.role4 i:after { height:190px; background:url(../../../images/sf/sub/ico_lab04.png) no-repeat 50% 0}
.labInfo .roleArea li.role0 i:after { height:159px; background:url(../../../images/sf/sub/ico_lab00.png) no-repeat 50% 0}
.labInfo .roleArea li.role5 i:after { height:161px; background:url(../../../images/sf/sub/ico_lab05.png) no-repeat 50% 0}
.labInfo .roleArea dt { display: block; font-size:20px; font-weight: 500; margin-bottom:10px; padding-left:13px}
.labInfo .roleArea dd { display: block; position: relative; padding-left:13px; font-weight: 300; line-height: 1.3;}
.labInfo .roleArea dd p{ font-size: 14px; margin-top: 8px; line-height: 1.2;}
.labInfo .roleArea dd:before { content:''; display:block; position: absolute; top:9px; left:0; width:5px; height:5px; background:#0f8d45}



.roleWrap { margin-bottom:45px;}
.roleWrap p { margin-bottom:25px; font-size:20px; text-align:center; font-weight:500; letter-spacing: -1px;}
.roleWrap .role01 { position: relative; text-align:center}
.roleWrap .role01:after { content:''; display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background:#cacaca; }
#subContent .roleWrap .role01 h3 { position:relative; display:inline-table; width:161px; height:161px; margin-bottom:25px; padding-bottom:10px; border-radius: 50%; color:#fff; background:#44465c; z-index: 1;}
.roleWrap .role01 h3 span { display:table-cell; font-size:16px; font-weight:300; vertical-align: middle; letter-spacing: -1px;}
.roleWrap .role01 h3 span:before { content:''; display: inline-block; width:37px; height:42px; background:url(../../../images/sf/common/icon.png) no-repeat -204px -250px}
.roleWrap .role01 h3 strong { display: block; font-size:23px; font-weight:500; line-height:1 }
.roleWrap .role01>ul { position:relative; overflow: hidden; width:80%; margin:0 auto;}
.roleWrap .role01>ul:after { content:''; display:block; position:absolute; top:50%; right:0; width:50%; height:1px; margin-top:-12px; background:#cacaca;}
.roleWrap .role01 li { position: relative; float:right; width:40%; margin-bottom:24px; padding:8px 0; border-radius: 35px; text-align:center; color:#fff; font-size:18px; background:#0f8d45; z-index: 1;}
.roleWrap .role01 li span { display:block; color:#ffea00; font-size:15px; font-weight:300}
.roleWrap .role02>ul { position: relative; overflow: hidden;  width:90%; margin:0 auto}
.roleWrap .role02>ul:after { content:''; display:block; position:absolute; top:0; left:12.5%; width:75%; height:1px; background:#cacaca; }
.roleWrap .role02>ul>li { position:relative; float:left; width:25%; padding:30px 20px 0}armerInfo
.roleWrap .role02>ul>li:after { content:''; display: block; position: absolute; top:0; left:50%; width:1px; height:30px; background:#cacaca; }
.roleWrap .role02 li span { display: block; margin-bottom:10px; font-size:18px; color:#fff; text-align:center; line-height:40px; border-radius:20px; background:#00ad51}
.roleWrap .role02 li ul { padding:0 18px;}
.roleWrap .role02 li li { letter-spacing: -1px;}



/* 실태조사 현황 */
.borderBox { padding:20px; border:1px solid #cfcfcf}
.scrollY { min-height:600px; overflow-y:auto}

.gridDetail .agreeBox+.help_txt{ background: #f5f5f5; border-top: 1px solid #ccc; padding: 5px 10px 5px 25px; line-height: 1.5}
.gridDetail .agreeBox+.help_txt:before{ top: 8px}

.referBox a.underline{ margin-left: 15px; font-size: 15px; color: #000; display: inline-block; margin-top: 10px}
.referBox a.underline:after{ content: '\261B'; display: inline-block; margin-left: 5px; font-size: 20px}

.decimalList>li{ list-style-type: decimal; line-height: 1.3; margin-bottom: 8px; }

.hangul{ margin: 15px 0 0 25px}
.hangul>li{ margin-bottom: 20px; line-height: 1.4; position: relative;}
.hangul>li:before{ content: ''; display: block; position: absolute; left: 0; width: 12px; height: 12px; background: rgba(120,120,120,.2); left: -5px}

.chkList>li{ float: left; width: 33.33%;}
.chkList>li>div{ margin: 0 5px 5px 0; border: 1px solid #d5d5d5; position: relative; padding: 0 10px 0 20px}
.chkList>li>div:hover{ border-color: #00ad51}
.chkList>li:nth-of-type(3n)>div{ margin-right: 0}
.chkList>li>div .agreeBox.agreeChk label{  font-size: 16px; line-height: 60px}
.chkList>li>div button{ background: #d5d5d5; height: 100%; position: absolute; right: 0; top: 0; cursor: pointer; padding: 0 10px}

.faqList{ margin: 10px 0; border-top: 1px solid #353e4d}
.faqList li dl { margin-bottom:2px; }
.faqList li dt{ position: relative; padding: 12px 50px; line-height: 27px; display: block; font-weight:500; background: #f9f9f9; border-bottom: 1px solid #cfcfcf}
.faqList li dt:before{ content: 'Q'; display: block; position: absolute; left: 5px; top: 7px; font-size: 35px; font-weight: 400; color: var(--krds-light-color-text-success); font-style: italic; line-height: 1;}
.faqList li dt .cate { margin-right:15px; color:var(--krds-light-color-text-success)}
.faqList li dd { position: relative; min-height: 75px; padding: 10px 10px 10px 50px; border-bottom: 1px solid #cfcfcf; word-break: break-all; line-height: 1.5;}
.faqList li dd:before{ content: 'A'; display: block; position: absolute; left: 5px; top: 0; font-size: 35px; font-weight: 700; color: var(--krds-light-color-text-point); font-style: italic;}
.faqList li dd .date { display:block}
.faqList.defList li dt:after { content:""; display:block; position: absolute; top:16px; right:20px; width:18px; height:18px; background: url(../../../images/sf/common/icon.png) no-repeat -200px -208px}
.faqList.defList li dd { display: none; }
.faqList.defList li.active dd{ display: block}
.faqList.defList li.active dt:after { background-position-x: -220px;}

.tabsDiv{ margin: 50px 0 0; position: relative}
#container #realContent .tabsDiv>div>h2{ margin:0; padding: 0; position: absolute; top: 0; background: #c8ccd4; color: #485671; font-size: 18px; line-height: 50px; width: 230px; text-align: center; border-radius: 10px 10px 0 0; font-weight: 400}
#container #realContent .tabsDiv>div>h2:before, #container #realContent .tabsDiv>div>h2:after{ display: none}
#container #realContent .tabsDiv div+div h2{ left: 230px}
#container #realContent .tabsDiv>div>h2 a{ color: #485671; display: block}
#container #realContent .tabsDiv>div.active>h2{ background: #485671; color: #fff; font-size: 20px; font-weight: 500}
#container #realContent .tabsDiv>div.active>h2:after{ content: ''; background: url(../../../images/sf/common/icon.png) no-repeat -333px -137px; width: 13px; height: 10px; display: block; left: 50%; top: auto; bottom: -10px}
#container #realContent .tabsDiv>div.active>h2 a{  color: #fff;}
.tabsDiv>div>div{ padding-top: 50px}
.tabsDiv>div .progress_t{ background: #485671; font-size: 15px; color: #dce0e8; padding: 15px 20px; font-weight: 300; margin-bottom: 25px}
.tabsDiv>div .progress_t strong{ font-size: 20px; margin-right: 10px; color: #fff}


.fileUpload{ position: relative; display: inline-block; min-width: 30%}
.fileUpload label{ position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; width:100%; height:35px; color:#fff; text-align:center; line-height:35px;}
.fileUpload label span{ position: absolute; right: 0; top: 0;}
.fileUpload label input{ display: block; position:absolute; width:calc(100% - 40px); height:100%; overflow:hidden; border: 0; background: transparent; left: 0; top: 0; opacity: 0}
.fileUpload input[type=text]{ position: absolute; left: 0; top: 0;  display: block; width: calc(100% - 40px); height:35px; line-height:35px; border:1px solid #d3d3d3; border-right: 0; box-sizing: border-box}



.finD{ text-align: center; margin: 30px 0}
.finD strong{ display: block; font-size: 30px; color: #000; line-height: 1.3}
.finD strong:before{ content: ''; display: block; background: url(../../../images/sf/common/icon.png) no-repeat -640px 0; width: 188px; height: 188px; margin: 0 auto 20px}
.finD strong em{ color: #117fc3}
.finD strong span{ display: block; font-size: 16px; color: #686868; font-weight: 300; line-height: 1; letter-spacing: -0.065em}
.finD>span{ display: block; font-size: 20px; color: #686868; position: relative; margin: 30px 0 10px; padding-top: 10px}
.finD>span:before{ content: ''; display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 100px; height: 2px; background: #bd2329; top: 0;}

.error{ background: #e6eef6}
.error>div{ position: relative; width: 1060px; margin: 0 auto}
.error>div:before{ content: ''; display: block; position: absolute; border: 0; border-top: 500px solid #0099bb; border-left: 530px solid transparent; border-right: 530px solid transparent; width: 0; height: 0; top: 0; left: 50%; transform: translateX(-50%); z-index: -1}
.error>div>div{ padding: 50px 0 50px; text-align: center; font-size: 18px; color: #636363; letter-spacing: -0.2em; }
.error>div>div:before{ background-position: 0 0; width: 404px; height: 307px; position: absolute; top: 70px; right: 0}
.error .headerLogo{ display: block; font-size: 17px; margin-bottom: 60px; color: #19fffc; line-height: 32px; letter-spacing: -0.045em; font-weight: 300; padding: 0}
.error .headerLogo i{ display: inline-block; background: url(../../../images/sf/common/ci.png) no-repeat 0 0 / 130px auto; width: 130px; height: 35px; font-size: 0; color: transparent; vertical-align: top;}
.error>div>div>strong{ font-size: 48px; color: #fff; font-weight: 700; line-height: 1; position: relative;}
.error>div>div>p{ display: block; padding: 30px 0 0; line-height: 1.4; color: #fccf3a; font-size: 30px; letter-spacing: -0.055em}
.error>div>div>p+p{ font-size: 20px; color: #fff0c0; padding: 0; font-weight: 300}
.error>div>div>p+p:after{ content: ''; display: block; background: url(../../../images/sf/common/error.png) no-repeat; width: 252px; height: 183px; margin: 60px auto 20px}
.error>div>div>span{ display: block; font-size: 15px; font-weight: 300; color: #0099bb; letter-spacing: 0}


.downloadBtn{ margin: -25px 0 60px}
.downloadBtn>a{ display: inline-block; margin: 0 5px 0 0; background: #fff; border: 1px solid #485671; line-height: 50px; font-size: 16px; color: #323232; font-weight: 300; letter-spacing: -0.085em;}
.downloadBtn>a:before, .downloadBtn>a i, .downloadBtn>a i:before{ content: ''; display: inline-block;}
.downloadBtn>a:before{ background: url(../../../images/sf/common/icon.png) no-repeat -161px -319px; width: 18px; height: 18px; vertical-align: middle; margin: 0 5px 0 10px}
.downloadBtn>a.ans:before{ background-position: -181px -319px; height: 22px}
.downloadBtn>a.exp:before{ background-position: -201px -318px; width: 15px; height: 19px}
.downloadBtn>a i{ background: #485671; line-height: 50px; font-size: 0; width: 65px; vertical-align: top; margin-left: 20px; text-align: center;}
.downloadBtn>a i:before{ background: url(../../../images/sf/common/icon.png) no-repeat -218px -319px; width: 13px; height: 14px; vertical-align: middle;}

.gridDetail td .gridDetail:before{ height: 0}
.gridDetail td .gridDetail thead:after{ height: 0}


/* 시설정보확인 */
.process{ text-align: center; position: relative; margin: 10px 0 35px}
.process li{ display: inline-block; position: relative; vertical-align: top; width: 170px; padding: 10px 35px 10px 25px;}
.process li span{ display: block; color: #323232; font-size: 16px; font-weight: 300; line-height: 1.2;  letter-spacing: -0.085em}
.process li span i, .process li span strong{ display: block;}
.process li span strong{ margin-top:10px; font-weight: 400;}
.process li span strong:after{ content: '\203A'; display: block; color: #323232; font-weight: 300; font-size: 44px; line-height: 1; position: absolute; top: 37px; right:0}
.process li:last-child span strong:after { display:none}
.process li span i{ width: 109px; height: 109px; border-radius: 50%; background: #4f80a5; margin: 0 auto; position: relative}
.process li span i:before{ content: ''; display: block; background: url(../../../images/sf/common/icon.png) no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.process li.step1 span i:before{ background-position: 0 -42px; width: 32px; height: 48px;}
.process li.step2 span i:before{ background-position: -34px -42px; width: 38px; height: 48px;}
.process li.step2-1 span i:before{ background-position: 0 -94px; width: 53px; height: 55px;}
.process li.step3 span i:before{ background-position: -74px -42px; width: 45px; height: 50px;}
.process li.step4 span i:before{ background-position: -121px -42px; width: 39px; height: 52px;}



/* 2022-10-17 수정 */
table.gridDetail:after { left:auto; right:0; background:#cfcfcf}
#subContent>h3>span { font-size:16px; font-weight: 300; color:#323232;}
textarea.inputData { height:auto}
.grayBox textarea { background:none}
.gridDetail.agreeBox { padding:15px 0;}
.gridDetail.agreeBox:after { display:none}
.gridDetail.agreeBox span { margin-right:65px;}



.program_imgList { overflow: hidden; margin-bottom:70px; position: relative;}
.program_imgList:after{ content: ''; clear: both; display: block;}
.program_imgList li { float: left; margin-left:0; margin-bottom:30px;; text-align: center;}
.program_imgList li .thumb { position: relative; display: block; overflow: hidden; height: 218px; border: 1px solid #d0d0d0;}
.program_imgList li .thumb img  { width:100%; height:100%}
.program_imgList .swiper-pagination{ bottom: -0px !important}
.program_imgList .swiper-pagination-bullet{ border-radius: 0; width: 30px; height: 5px}
.program_imgList .swiper-pagination-bullet-active{ background: #696969;}




@media (min-width:768px) and (max-width:1300px){
    .usrJoinHead { background-image:none}
}
@media all and (max-width:1330px){
    .leftBox .line1::before{width:110px; left: -115px;}
    .leftBox .line1::after{width:258%;}
}
@media all and (max-width:1300px){
    .leftBox .line1::after{width:490px}
    .rightBox .secBx::after{width: 70px;background-color: #fff;border: 1px solid #0c2e4f;left:15%;border-left: none; bottom: 6px;}
}
@media all and (max-width:1279px){
    #container>.referLineBox { margin-right:20px; margin-left:20px}
    .leftBox .line1::after{width:450px;}
    .leftBox .line1::before{width:105px; left: -105px;}
}
@media all and (max-width:1230px){
    .leftBox .line1::after{width:410px;}
    .rightBox .secBx::after{left:15%}
}
@media all and (max-width:1200px){

    .chkSearchBox li label { letter-spacing: -1px;}
    .farm.boardView .titleArea dd span { width:45%}
    .activity.ebookList li dd.btnArea .button { padding-left:35%}
    .ebookList li { width:50%}
    .activity.ebookList li { width:33.33%}
    .btnIconList li { width:calc(33.33% - 7px)}
    .hbackground li { width:33.33%}
    .hbackground li:nth-child(4) { border-left:0}
    .hbackground li:nth-child(4):after { display: none;}
    .policyWrap dd span { margin:16px 2px}
    .policyArea4 dd span:before { top:calc(38% - 1px)}
    .policyArea4 dd span + span:after { top:calc(38% - 85px)}
    .policyArea4 dd span:first-child { padding-right: 70px;}
    .diagramContainer .innerbox2 div ul li{width: 150px;padding: 10px 5px;}
    .diagramContainer .innerbox2 .outsideBox{width: 120px; padding: 10px 10px;}
    .leftBox .line1::after{width:415px;}
    .rightBox .secBx::after{left:3%}
    .diagramContainer .innerbox2 div.centerBox ul li{margin: 45px 0;}
    .centerBox .firstBx::before, .centerBox .secBx::before{left: 42%;}
    .lineCenter::after{left: 52%;}
    .centerBox .firstBx span::before,.centerBox .firstBx span::after{bottom: 20px;}
    .leftBox .thirBx span::before{width: 150px;right:-78px;}
}
@media all and (max-width:1100px){
    .leftBox .line1::after{width:340px;}
    .lineCenter::after{left: 55%;}
    .innerList li::before{left: 46%;}
}
@media all and (max-width:1023px){
    .mapBox { float:none !important; width:100% !important; text-align: center;}
    .searchMap .chkSearchBox { float:none; width:calc(100% + 2px); height:auto;}
    .farm.boardView .titleArea dd span.ico_addr { width:100%}
    .farm.boardView .titleArea dd span.ico_name { width:45%}
    .subtab_btn li { width:calc(25% + 1px)}
    .mypage.subtab_btn li { width:calc(20% + 1px)}
    .thumbList>li { width:33.33%}
    .boardView .titleArea { display: block;}
    .boardView .titleArea dt,
    .boardView .titleArea dd,
    .farm.boardView .titleArea dt,
    .farm.boardView .titleArea dd { width:100%}
    .farm.boardView .titleArea dd span,
    .farm.boardView .titleArea dd span.ico_name,
    .farm.boardView .titleArea dd span.ico_tag { width:49%}

    .boardView .contArea .infoArea dl:first-child { width:100%}
    .boardView .contArea .infoArea dl:nth-child(2),
    .boardView .contArea .infoArea dl:nth-child(3) { width:50%}
    .imgAativeList li { width:calc(33.33% - 8px);}
    .imgAativeList li:nth-child(4n+1) { margin-left:12px}
    .imgAativeList li:nth-child(3n+1) { margin-left:0}
    .activityInfo .infoTitle span { position: relative; display: block}
    .activity.ebookList { padding:0}
    .lifeCycleSurvey li { grid-template-columns:180px 1fr 110px }
    .lifeCycleSurvey li .title { display: block;}
    .lifeCycleSurvey li .title strong { display: block;}
    .lifeCycleSurvey .lifeCycle { display: none;}
    .lifeCycleChoice li i { display: block; margin:0 auto}
    .surveryWrite .title>div { position: initial; margin-top:10px; margin-left:50px}
    .visionArea .area>div ul { padding:20px}
    .iconListWrap .iconList { padding-left:162px; }
    .iconListWrap .iconList i { left:20px}
    .visionArea .goal>div { flex:auto; width:100%}
    .visionArea .goal>div + div { margin-left:0; margin-top:10px}
    .schRanking { display: none;}
    .hcenter .roleArea dl { flex:auto; width:calc(50% - 10px); margin: 5px;}
    .hcenterList>div { float:none; width:100% !important}
    .hcenterList .mapBox { margin-right:0; margin-bottom:20px}
    .vision li { width:130px; margin:0 20px; font-size:18px}
    .vision li i { width:130px; height:130px;}
    .vision li:before { top:59px; right:-30px}
    .vision li:after { top:65px; right:-30px}
    .feature li { padding:30px 15px 10px; font-size:18px}
    .policyWrap dt { padding:12px 10px}
    .policyWrap dd { padding:10px}
    .policyWrap dd span { margin:10px 5px}
    .policyWrap dd span i { width:90px; height:90px}
    .policyArea2 { width:100%}
    .policyArea3 { width:100%; margin-top:4%; margin-left:0}
    .policyArea3 dd { flex-direction: row; padding-top:35px; align-items: start;}
    .policyArea3 dd span { width:120px}
    .policyArea3 dt:before { height:30px; bottom:-30px}
    .policyArea3 dt:after { bottom:-30px}
    .policyArea4 { width:100%; margin-top:1%; margin-left:0}
    .policyArea4 dd { height:calc(100% - 48px)}
    .policyArea4 dd span { min-height:auto; }
    .policyArea4 dd span:before,
    .policyArea4 dd span:after { display: none !important;}
    .policyArea4 dd span + span { margin-top:10px}
    .policyArea1 { padding:41px 0}
    .policyArea1 span { width:30%}
    .outGrid .gridDetail th { padding-left:10px}
    .outGrid .gridDetail td .help_txt { display: block;}
    .leftBox .line1::after{width:310px;}
    .testIntro .disqualify ul { flex-wrap:wrap}
    .testIntro .disqualify li { flex:auto; width:calc(50% - 5px); padding-right:60px;}
    .testIntro .application dt { width:100px; height:100px;}
    .testIntro .application dd { width:calc(100% - 120px)}
    .boxList li { width:calc(50% - 10px)}
    .myInfoWrap + .tab_btn { flex-wrap: wrap;}
    .myInfoWrap + .tab_btn li { flex:auto; width:20%; border-top:1px solid #cacaca}
    .myInfoWrap + .tab_btn li:first-child { border-top:0}
    .myInfoWrap + .tab_btn li:nth-child(2) { border-left:0; }
    .myInfoWrap .testDate:after { display: none;}
    .testResultView .score>span { display: block;}
    .testResultView li { padding:12px 15px}
    .testResultView li strong { display: block; margin-left:0; text-align: center;}
}
@media all and (max-width:960px){
    .fileDownArea li { width:95%}
    .program.boardView .activeList li { width:100%}
    .program.boardView .activeList li:nth-child(odd) { margin-left:0}

    .hfarmer .processArea { flex-wrap: wrap;}
    .hfarmer .processArea dl { flex:auto; width:100%; margin-left:0; margin-top:20px;}
    .hfarmer .infoArea li { width:100%}
    .hfarmer .cancelArea { flex-wrap: wrap;}
    .hfarmer .cancelArea dl { flex:auto; width:100%; }
    .hfarmer .cancelArea dl + dl { margin-left:0; margin-top:20px;}
    .history dl { width:calc(50% - 20px)}
    .foreign dl { width:calc(50% - 9px)}
    .foreign dl:nth-of-type(3n+1) { margin-left:18px;}
    .foreign dl:nth-of-type(2n+1) { margin-left:0}
    .diagramContainer *::before,.diagramContainer *::after,.innerList li::before{display: none;}
    .diagramContainer * span::after,
    .innerbox .lineleft::before, .innerbox .lineleft::after,.leftBox .firstBx span::before,.leftBox .line1::before,.leftBox .line1::after,.centerBox .firstBx span::before,.rightBox .secBx::after,.leftBox .thirBx span::before,.centerBox .firstBx span::before, .rightBox .secBx span::before{display: none;}
    .diagramContainer{display: flex;flex-direction: column;}
    .diagramContainer .innerbox2 .outsideBox{right: 35px; top:250px;}
    .diagramContainer .innerbox2{width: 100%;}
    .diagramContainer .innerbox2::before{content: ''; display: block; width: 95px; height: 120px;border:1px solid #38b94c; position: absolute; top:-30px;left: 0;border-right: none; z-index: -1;}
    .diagramContainer .innerbox span{width: 150px;padding: 10px 5px;}
    .innerbox::before{top:25px; width: 30%; display: block; left: 115px;}
    .innerbox::after{content: ''; display: block;width: 10%; height: 45px; border:1px solid #38b94c; position: absolute;left: 112px;top:25px; border-bottom: none;border-right: none;z-index: -1;}
    .diagramContainer .innerbox2 .leftBox::before{content: ''; display: block; width: 350px; height:70%; position: absolute;left: 75px;top: 15px;border: 1px solid #0c2e4f;border-bottom: none; border-right: none;}
    .diagramContainer .innerbox2 .leftBox .secBx::after,.diagramContainer .innerbox2 .centerBox .firstBx::after,
    .diagramContainer .innerbox2 .leftBox .thirBx::after{content: ''; display: block;width: 200%;height: 1px;background-color: #0c2e4f;position: absolute; bottom: 50%; z-index: -1;left:40%}
    .diagramContainer .innerbox2 .rightBox:before{content: ''; display: block; border:1px solid #0c2e4f; background: none;width: 350px;height: 150px;position: absolute;left: -275px;top:15px; border-bottom: none;border-left: none;}
    .diagramContainer .innerbox2 .rightBox .secBx::before{top: 45%;}
    .diagramContainer .innerbox2 .centerBox::before{content: ''; display: block; width: 1px; height: 200%;background-color: #0c2e4f; position: absolute;left: 75px;bottom: -50px;}
    .outsideBox::before{display: block;border-radius: 0; background:#0c2e4f; border:none;height: 100px;z-index: -1;width: 1px;left: 60px;}
    .innerList::before{display: block;}
    .receiptTitle ul { float:none; padding:10px 0; margin:-1px 27px 0 10px; border-top:1px solid #39be4a}
}
@media all and (max-width:860px){
    .ebookList li,
    .ebookList li dl { width:100% !important}
    .program.ebookList li { border-top:1px solid #c7c7c7; padding-top:20px}
    .program.ebookList li .thumb { top:20px}
    .activity.ebookList li .thumb { top:0}
    .activity.ebookList li { padding:50px 0 15px}
    .activity.ebookList li dl { padding:15px 0}
    .activity.ebookList li dd { height:auto}
    .activity.ebookList li dd.btnArea { position: relative; margin-top:15px}
    .activity.ebookList li dd.btnArea .button { padding-left:0; height:50px; line-height: 50px; text-align: center;}
    .acquire { float:none; top:0; display: inline-block; margin-left:0; margin-bottom:10px}
    .acquire + p.necessary { float:right; margin-top:0; line-height: 1;}

}
@media all and (max-width:820px){
    .subtab_btn li { width:calc(33.33% + 1px)}
    .activityInfo dl { padding:15px 12px}
    .activityInfo dd .button.download { position: relative; top:auto; right:auto; display: block; width: 100%; margin-top:15px;}
    .btnIconList li { width:calc(50% - 5px); margin-bottom:10px;}
    .btnIconList li:nth-child(2n+1) { margin-left:0}
    .txtList li dt span { display: block; margin-top:5px; margin-left:0}
    .myInfoWrap>ul li { width:100%}
    .myInfoWrap>ul li + li { margin-top:5px}
    .joinWrap .myInfoWrap li + li { margin-top:0}
}
@media all and (max-width:767px){

    .usrJoinHead:before,
    .usrJoinHead:after { display: none;}

    .joinH2 { font-size:28px}
    .joinStep { flex-wrap: wrap;}
    .joinStep li { flex:auto; width:100%; border-left:0; border-top:1px solid #cacaca}
    .joinStep li:first-child { border-top:0}

    .tab_btn { flex-wrap: wrap;}
    .tab_btn li { flex:auto; width:50%; border-top:1px solid #cacaca;}
    .tab_btn li:nth-child(1), .tab_btn li:nth-child(2) { border-top:0}
    .tab_btn li:nth-child(odd) { border-left:0}
    .mypage.subtab_btn li { width:calc(25% + 1px)}

    .popCont.insti1 .tab_btn li { flex:1; border-top:0;}
    .popCont.insti1 .tab_btn li:nth-child(3) { border-left:1px solid #cacaca}
    .popCont.insti3 .tab_btn li { width:16.66%}
    .popCont.insti3 .tab_btn li:nth-child(3), .popCont.insti3 .tab_btn li:nth-child(4), .popCont.insti3 .tab_btn li:nth-child(5), .popCont.insti3 .tab_btn li:nth-child(6) { border-top:0}
    .popCont.insti3 .tab_btn li:nth-child(3) { border-left:1px solid #cacaca}
    .popCont.insti3 .tab_btn li:nth-child(7) { border-left:0}
    #popWrap .chkWrap label { width:calc(25% - 10px)}

    .surveryWrite dd.krds-check-area { flex-direction: column;}
    .searchBox .searchForm { width:100%; flex-direction: column; gap:var(--krds-gap-3); margin-bottom:15px; padding-bottom:12px; border-bottom:1px dashed #cacaca}
    .searchBox .krds-btn { width:100%; }
    .searchBox .totalPage { order:2}

    .boardView .contArea .infoArea dl { width:100% !important}
    .boardView .contArea .textBox.videoArea { padding:30px 0; }
    .thumbList>li,
    .insti.thumbList>li { width:50%}
    .program.boardView .contArea .infoArea dl:first-child,
    .program.boardView .contArea .infoArea dl:nth-child(2),
    .program.boardView .contArea .infoArea dl:nth-child(3),
    .program.boardView .contArea .infoArea dl:nth-child(4) { width:100%}

    .chkSearchBox .chkLife { flex-wrap: wrap;}
    .chkSearchBox .chkLife li { flex:auto; width:50%}
    .chkSearchBox .chkLife li:nth-child(3),
    .chkSearchBox .chkLife li:nth-child(4) { border-top:1px solid #b9d8dd}
    .chkSearchBox .chkLife li:nth-child(3) { border-left:0}
    .chkSearchBox .chkForm ul { flex-wrap: wrap;}
    .mypage.chkSearchBox .chkForm li { width:calc(16.66% - 6px)}
    .mypage.chkSearchBox .shcForm .inputData { width:calc(50% - 37px)}

    .infoBox>p { width:100%}
    .infoBox:before { display: none;}
    .imgAativeList li { width:calc(50% - 6px)}
    .imgAativeList li:nth-child(3n+1) { margin-left:12px}
    .imgAativeList li:nth-child(2n+1) { margin-left:0 }
    .activity.boardView .imgList li { width:50%}
    .txtList li dd.addr, .txtList li dd.txt { padding-right:0}
    .txtList li dd.addr .ico_blank { position: initial; margin-top:5px; height:35px}

    .gridScroll{ position: relative; width:100%; overflow-x: auto;}
    .gridScroll:before{ content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; z-index: 10;}
    .gridScroll:after{content: '\27A8\0020\0020 화면을 터치한 후에  좌우로 스크롤하여 확인하세요';display: block;position: absolute;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);top: 20%;color: #fff;z-index: 20;font-size: 1em;font-weight: 500;background: #000;padding: 10px 20px;border-radius: 10px; width: 80%; text-align: center;}
    .gridScroll:hover:before, .gridScroll:hover:after{ display: none}
    .gridScroll .gridDetail { min-width:700px}

    .outGrid .gridDetail,
    .outGrid .gridDetail tbody,
    .outGrid .gridDetail tr,
    .outGrid .gridDetail th,
    .outGrid .gridDetail td { display: block;}
    .outGrid .gridDetail td { border-left:0;}

    .boardList.gridDetail { min-width: auto;}
    .boardList.gridDetail tr { display: block; padding:15px 10px; border-bottom:1px solid #dcdcdc}
    .boardList.gridDetail colgroup,
    .boardList.gridDetail thead,
    .boardList.gridDetail .num,
    .boardList.gridDetail .count { display: none;}
    .boardList.gridDetail td { display: inline-block; padding:0 !important; border-left:0; border-bottom:0 !important; font-size:15px;}
    .boardList.gridDetail td:before { content:''; display: inline-block; width:1px; height: 10px; margin-left:10px; padding-left:13px; border-left:1px solid #dcdcdc}
    .boardList.gridDetail .subject:before,
    .boardList.gridDetail .subject + td:before,
    .boardList.gridDetail .instit:before,
    .boardList.gridDetail .chk:before { display: none;}
    .boardList.gridDetail .instit { margin-bottom:5px; color:#147a69}
    .boardList.gridDetail .subject { display:block; width:100%; margin-bottom:5px; font-size:16px}
    .boardList.gridDetail .thesis { display: block; width:100%; margin-top:10px; padding-top:10px; border-top:1px dashed #cacaca }

    .eduList.boardList.gridDetail tr { padding-right:68px}
    .eduList.boardList.gridDetail .btn { position: absolute; top:50%; right:10px; transform: translateY(-50%);  }
    .eduList.boardList.gridDetail .btn:before { display: none}
    .eduList.boardList.gridDetail .btn .button { height:48px; line-height: 46px; border-radius: 100%; width:48px}

    .visionArea .area>div { flex:auto; width:100%}
    .visionArea .area>div + div { margin-left:0; margin-top:10px}
    .iconListWrap .iconList { width:100%}
    .visionArea .vision p { width:100%}
    .error_page:before { width:225px; height:184px; background-size:100%}
    .error_page p { font-size:16px}
    .error_page p span { font-size:30px;}
    .allSearchWrap .allSearchTab { display: flex; justify-content: center;}
    .allSearchWrap .allSearchTab li { flex:1}
    .allSearchWrap .allSearchTab li a { font-size: 16px;}
    .allSearchWrap .allSearch { display: block;}
    .allSearchWrap .allSearch select {margin-left:0}
    .allSearchWrap .allSearch input { width:calc(100% - 204px); font-size:16px; margin:9px 10px 9px 0 }
    .feature li { width:100%; margin:4px 0; padding:20px 15px;}
    .feature li:after { top:-4px; left:50%}
    .feature li i { margin-top:10px}
    .vision { padding-top:0}
    .vision li { width:100%; margin:0 0 45px 0; padding:10px; border:5px solid #3774d5; border-radius: 20px;}
    .vision li i { height:auto; margin:0 auto 10px; border:0}
    .vision li:before { transform: rotate(135deg); top:auto; bottom:-35px; right:calc(50% - 6px)}
    .vision li:after { top:auto; right:50%; bottom:-35px; width:2px; height:20px;}
    .vision li:nth-child(even) { border-color:#23507b}
    .visionWrap h2 { margin-top:15px; width:100%; padding:16px 0}
    .policyArea1 { padding-bottom:0}
    .policyArea1 strong { margin-bottom:41px;}
    .policyArea1 span { position: relative; top:auto; width:100%; padding:40px 0 10px; transform: none;}
    .policyArea1 span:nth-of-type(1) { right:auto; margin-right:0}
    .policyArea1 span:nth-of-type(2) { left:auto; margin-left:0}
    .policyArea1 span:before { top:0; width:2px; height:30%}
    .policyArea1 span:nth-of-type(1):before { right:calc(50% - 1px)}
    .policyArea1 span:nth-of-type(2):before { left:calc(50% - 1px)}
    .policyArea1 span:after { top:20%; }
    .policyArea1 span:nth-of-type(1):after { right:50%; transform: translate(50%, 0); }
    .policyArea1 span:nth-of-type(2):after { left:50%; transform:translate(-50%, 0) ;}

    .activity .contArea #bx-pager a { height:66px}
    .activity .contArea #bx-pager a.active:after { border-width: 5px;}
    .receiptStep { margin-bottom:20px;}
    .receiptStep li i { width:80px; height:80px; border:3px solid transparent; background:none; background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #e3e4e6, #e3e4e6); background-origin: border-box; background-clip: content-box, border-box;}
    .receiptStep li:after { top:35px; width:10px; height:10px;}
    .receiptStep li.active { font-size:16px}
    .receiptStep li.active i { background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #39be4a, #147a69);}
    .agreeDiv h2 span.fr { float: none; margin-left:0;}
    .receipt_tab_btn li { flex:1}
    .receipt_tab_btn li.active a { font-size:initial}
    .testSchedule ul { padding:0; justify-content:start}
    .testSchedule li { width:48%}
    .testSchedule li dl { width:calc(100% - 110px) !important}
    .outGrid .picArea { float:none;}
    .outGrid .picArea + .fr { float:none; width:100%}
    .picUploadStep ol { flex-direction: column;}
    .testIntro .disqualify li { width:100%}
    .testIntro .application { flex-direction: column; gap:10px}
    .precautionsWrap .precautions { width:100%}
    .precautionsWrap .precautions:first-child { margin-right:0; margin-bottom:20px}
    .precautionsWrap .precautions:last-child { margin-top:20px}
    .myInfoWrap + .tab_btn li:nth-child(2) { border-top:1px solid #cacaca}
    .myInfoWrap + .tab_btn li:nth-child(3) { border-left:1px solid #cacaca}
    .myTestTitle { padding:0 6px; }
    .myTestTitle li { padding:10px 20px}
    .boxList li.hover:hover { border-color:#cacaca;}
    .boxList li.hover:hover:after { display: none;}
    .boxList li.hover .button { display: inline-block; height:30px; line-height: 28px;}
    .copyrightType { flex-wrap: wrap;}
    .copyrightType dl { flex:auto; width:calc(50% - 5px)}
    .viewerWrap { padding:0 20px}
    .viewerWrap li { flex-wrap: wrap; padding:20px 0; }
    .viewerWrap li dl { width:calc(100% - 58px); padding-right:0}
    .viewerWrap li .button { width:100%; }
    .directionDetail { margin:0}
    .directionDetail .terminalInfo { flex-direction: column; gap:30px}
    .myInfoWrap .testDate { flex-direction: column; gap:10px}
    .myInfoWrap .testDate div { width:100%}
    .myInfoWrap .testDate dl { margin-right:0}
    .myInfoWrap .testDate dl:after { display: none;}
    .myInfoWrap .testDate dt,
    .myInfoWrap .testDate dd { padding-left:10px; padding-right:10px;}
    .tab_btn.myTest li:nth-child(odd) { border-left:1px solid #cacaca}
    .tab_btn.myTest li:nth-child(even),
    .tab_btn.myTest li:first-child { border-left:0}
    .tab_btn.myTest li:nth-child(2) { border-top:1px solid #cacaca}
    .testResultView ul {flex-direction: column; gap: 20px; padding:12px 30px}
    .testResultView li { padding:0}
    .testResultView li strong { float: right;}
    .testResultView li:after { top:0; width:100%; height:1px; margin-top:-10px;}
    .testResultView .btnArea .button { margin-bottom: 5px;}
}
@media all and (max-width:660px){
    .diagramContainer .innerbox2 .leftBox::before{width: 200px;}
    .diagramContainer .innerbox2 .rightBox:before{width: 200px;left: -125px;}
    .diagramContainer .innerbox2 .leftBox .secBx::after,.diagramContainer .innerbox2 .centerBox .firstBx::after,.diagramContainer .innerbox2 .leftBox .thirBx::after{left:15%}
}
@media all and (max-width:640px){
    .program.boardView .thumb { position: relative; margin:0 auto}
    .program.boardView .contArea .infoArea { margin-left:0}
    .subtab_btn li { width:calc(50% + 1px) !important}
    .chkSearchBox .chkForm li { width:calc(33.33% - 10px)}
    .boardView .titleArea .button { position: relative; top:auto; right:auto; margin:5px; width:calc(100% - 10px); text-align: center; font-size:16px}
    .txtList li .thumb { width:170px; }
    .btnIconList li { width:100%; margin-bottom:10px; margin-left:0}
    .lifeCycleSurvey li { display: block; overflow: hidden;}
    .lifeCycleChoice li a:after { display: block; margin:0 auto}
    .hcenter .roleArea dl { flex:auto; width:100%; margin:5px 0; min-height: auto;}
    .hcenterList .txtList li .thumb { width:145px; }
    .hcenterList .txtList li .thumb + dl { width:calc(100% - 165px)}
    .hcenterList .txtList li dd.info span + span { margin-left:20px }
    .hbackground li { width:50%}
    .hbackground li:nth-child(3),
    .hbackground li:nth-child(5) { border-left:0}
    .hbackground li:nth-child(4) { border-left:1px dashed #a4a4a4 }
    .hbackground li:nth-child(3):after,
    .hbackground li:nth-child(5):after { display: none}
    .hbackground li:nth-child(4):after { display: block;}
    .history dl { width:calc(100% - 20px); margin:30px 0 0 0}
    .history dl:after { transform:rotate(90deg);}
    .history>p { margin-top:0}
    .foreign dl { width:100%; margin-left:0 !important; }
    .layerPop>div { width:90%; max-height: 90%; overflow-y: auto;}
    .receiptBox { padding:10px 20px;}
    .receiptBox i,
    .receiptBox2 i,
    .receiptBox3 i { display: none !important;}
    .receiptBox>div,
    .receiptBox2 p,
    .receiptBox3>div { width:100%}
    .receiptBox3 { padding:20px;}
    .boxList li { width:100%}
    .myInfoWrap + .tab_btn li { width:50%}
    .myInfoWrap + .tab_btn li:nth-child(4) { border-left:0}
    .directionDetail { padding:20px 0; }
    .directionDetail>i { display: none;}
    .directionDetail .info_txt { margin-left:0}
    .directionDetail.bg_gray { padding:20px;}
}
@media all and (max-width:576px){
    .diagramContainer .innerbox2 .leftBox .secBx::after,.diagramContainer .innerbox2 .centerBox .firstBx::after,.diagramContainer .innerbox2 .leftBox .thirBx::after{left:0}
    .acquire + p.necessary { float:none}
}
@media all and (max-width:560px){
    .diagramContainer { margin-bottom:0}
    .diagramContainer *::before,.diagramContainer *::after,.diagramContainer .innerbox2 div *::before,.diagramContainer .innerbox2 .centerBox::before,.diagramContainer .innerbox2 .rightBox::before,.diagramContainer .innerbox2 .rightBox .secBx::before,.diagramContainer .innerbox2 .leftBox::before,.diagramContainer .innerbox2 .leftBox .secBx::after, .diagramContainer .innerbox2 .centerBox .firstBx::after, .diagramContainer .innerbox2 .leftBox .thirBx::after,.diagramContainer .innerbox2 .centerBox .firstBx::before, .diagramContainer .innerbox2 .rightBox .secBx::before, .diagramContainer .innerbox2 .centerBox .secBx::before{display: none;}
    .diagramContainer .innerList{display: block; position: absolute;}
    .diagramContainer .innerbox{width: 90%;}
    .diagramContainer .innerbox span{width: 40%;}
    .diagramContainer .innerbox .lineleft{margin:10px 10px 0 60px;}
    .diagramContainer .innerbox2{width:90%; padding: 0; margin:0 50px;}
    .diagramContainer .innerbox2 div ul{width: 50%;}
    .diagramContainer .innerbox2 div ul li{width: 100%; margin:45px auto;}
    .diagramContainer .innerbox2 .leftBox , .diagramContainer .innerbox2 .rightBox, .diagramContainer .innerbox2  .centerBox{float: none; width: 100%;display: block;}
    .diagramContainer .innerbox2 div.centerBox {margin: 0;}
    .diagramContainer .innerbox2 .outsideBox{width:30%;left: 0x;bottom: 45px; top:auto;}
    .diagramContainer .innerbox2 .outsideBox::before{content: '';display: block; width: 80%; height: 1px; left: -55px;top: 20px;}
    .diagramContainer .innerbox2 .innerList{right: 20px;top:98px; width: 30%;}
    .diagramContainer .innerbox2::before{width: 95px; height: 85px;top:-20px;left:40%;border-left: none;border-right: 1px solid #38b94c;}
    .diagramContainer .innerList li{width: 100%; margin: 15px 0;}
    .diagramContainer .innerList::before{content: ''; display: block; border: solid 1px #0c2e4f; width:55%;top: 35px; left: -30px; height: 60%; border-right: none;z-index: -1;}
    .diagramContainer::before{content: '';display: block; width: 1px; height: 75%; top:30px;background:#0c2e4f; position: absolute;z-index: -1;}
    .diagramContainer .innerbox2 .leftBox .firstBx::before, .diagramContainer .innerbox2 .centerBox::before{content: ''; display: block; border: none; height: 1px; background: #0c2e4f;width: 55%; left: -50px; top:20px; z-index: -1;}
    .diagramContainer .innerbox2 .rightBox .firstBx::before{content: ''; display: block; background: none; border:1px solid #0c2e4f; border-radius: 0; width: 50%;height: 29px; left: -50px; border-top: none; border-right: none;}
    .diagramContainer .innerbox::before{content: ''; display: block; width: 50%; height: 60px; left: 0;top: 30px; background:none; border: 1px solid #0c2e4f;border-right: none; border-bottom:1px solid #38b94c;}
    .diagramContainer .innerbox2 .leftBox .thirBx::before{content: ''; display: block; border: none; height: 1px;width: 100%; top:20px; z-index: -1;}
    .diagramContainer .innerbox2 .leftBox .firstBx::after,.diagramContainer .innerbox2 .centerBox::after,.diagramContainer .innerbox2 .rightBox::after{content:'';display: block; width: 1px;height: 150px;position: absolute;background:#0c2e4f;left: 50%;}
    .diagramContainer .innerbox2 .centerBox::after,.diagramContainer .innerbox2 .rightBox::after{top:0; left: 25%; z-index: -1;height: 105px;}
    .mypage.chkSearchBox .chkForm li { width:calc(33.33% - 6px)}
    .mypage.chkSearchBox .shcForm .inputData { width:100%; margin-bottom:5px}
    .mypage.chkSearchBox .shcForm .button { width:100%}
    .gridDetail td .btnPrintWrap { float: none;}
    .gridDetail td .btnPrintWrap .button { width:49%}
    .receiptStep { align-items: center;}
    .receiptStep li { font-size:15px !important}
    .receiptStep li:after { top:50%; margin-top:-5px;}
    .receiptStep li i { display: none;}
    .receipt_tab_btn li { flex:auto; width:100%}
    .gridDetail .convenCheck dl { padding:0 20px 0 15px}
    .gridDetail .convenCheck dt,
    .gridDetail .convenCheck dd { float:none; width:100%}
}
@media all and (max-width:500px){
    .referLineBox { padding-left:30px;}
    .referLineBox>i { display: none;}
    .referLineBox>p>strong { font-size:18px}
    .infoBox>p { padding-left:27px; font-size:18px;}
    .infoBox>p:before { left:0}
    .farm.thumbList li { padding:20px 10px 30px }
    .chkSearchBox .chkLife li label:before { margin-right:10px}
    .chkSearchBox .chkForm li { width:calc(50% - 10px)}
    .chkSearchBox .shcForm .button { width:55px}
    .chkSearchBox .shcForm .inputData { width:calc(100% - 114px)}
    .boardView .titleArea dd span { width:100% !important}
    .boardView .titleArea dt,
    .boardView .titleArea dd { padding:12px 20px}
    .boardView .titleArea dt { font-size:18px}
    .ebookList li .thumb { position: relative; top:auto !important; width:100%; height: auto;}
    .ebookList li { padding-left:0}
    .ebookList li dl { min-height: auto;}
    .ebookList li dd.btnArea { position: relative; bottom:auto}
    .program.boardView .thumb { width:100%; height: auto;}
    .tab_btn li.active a { font-size:initial ;}
    .imgAativeList li { width:100%; margin-left:0 !important}
    .subtab_btn { margin:0 0 50px}
    #footer .linkSite>div { width:100% !important; margin-right:0; margin-bottom:5px;}
    .txtList li .thumb { width:100%; margin-bottom:10px}
    .txtList li .thumb + dl { width:100%}
    .thumbList>li,
    .insti.thumbList>li { width:100%}
    .lifeCycleChoice ul { flex-wrap: wrap; justify-content: center;}
    .lifeCycleChoice li { flex:none; border-left:0; width:30%}
    .lifeCycleChoice li.active a { border-radius: 10px;}
    #popWrap .popCont .button.topBtn { position:initial; width:100%; margin-bottom: 20px; border-color:#a3aab8}
    .iconListWrap .iconList { padding:22px 0 0 102px}
    .iconListWrap .iconList i { left:0; width:82px; height:82px}
    .visionArea .goal li { width:100%; justify-content: left; margin-top:10px}
    .hfarmer .infoArea li { min-height:142px; padding:20px 0 20px 112px}
    .hfarmer .infoArea li i { left:0; width:92px}
    .allSearchWrap .allSearch select { width:90px;}
    .allSearchWrap .allSearch input { width:calc(100% - 150px)}
    .allSearchWrap .allSearch .button { width:50px}
    .allSearchWrap .allSearchTab { padding:10px 5px}
    .allSearchWrap .allSearchTab li a { font-size:15px;}
    .boardView.hcenter .titleArea span  { position: initial; display: block; margin-top:-15px; padding:0 25px 10px 70px}
    .hcenterList .txtList li .thumb { width:100%;}
    .hcenterList .txtList li .thumb + dl { width:100%}
    .hcenterList .txtList li .thumb, .hcenterList .txtList li .thumb img{ height: auto;}
    .farmImgSlide .swiper-slide{ height: auto; width: 100% !important}
    .thumbList .thumb, .farmImgSlide .swiper-slide img{ height: auto}
    .hbackground li { width:100%; border-left:0 !important}
    .hbackground li + li { padding-top:20px; border-top:1px dashed #a4a4a4}
    .hbackground li + li:after { display: block !important; top:0; left:50%}
    .system .iconListWrap .iconList { padding-bottom:22px}
    .popCont.insti3 .tab_btn li { width:20%}
    .popCont.insti3 .tab_btn li:nth-child(6) { border-top:1px solid #cacaca}
    .popCont.insti3 .tab_btn li:nth-child(7) { border-left:1px solid #cacaca}
    .popCont.insti3 .tab_btn li:nth-child(5n+1) { border-left:0}
    #popWrap .chkWrap label { width:calc(33.33% - 10px)}
    .gridDetail td .btnPrintWrap .button { width:100%}
    .gridDetail td .btnPrintWrap .button + .button { margin-top:5px}
    .activity .contArea #bx-pager a { height:50px}
    .testSchedule li { width:100%}
    .receiptTitle { text-align: center;}
    .receiptTitle span { width: 100%; margin-right:0; margin-bottom:10px; }
    .receiptTitle ul { margin:10px 15px 0 15px; text-align: left;}
    .receiptTitle li { margin:0}
    .directionDetail .path { display: block; text-align: center;}
}
@media all and (max-width:470px){
    .testIntro .receiptBox3 { padding-bottom:96px;}
}
@media all and (max-width:400px){
    .hcenter .roleArea dl:after { display: none}
    #popWrap .chkWrap label { width:calc(50% - 10px)}
    .popCont.insti2 .tab_btn li { width:100%; border-left:0}
    .copyrightType dl { width:100%}
    .myInfoWrap .testDate li { padding:0 14px}
    .testResultView ul { padding:12px}
}

/* 위 상단 소스는 수정 또는 삭제, 추가하지 말고 아래 추가하는 방식으로 작성 바람 */


/* 2023 08 28 */
.boardView .contArea .cont_h3Title { margin-top:50px; margin-bottom:20px; padding-left:0; color:#147a69; font-size:20px; font-weight: 600;}
.boardView .contArea .cont_h3Title:before { top:50%; left:0; width:100%; height:0; background: none; border-bottom:1px dashed #147a69; z-index: -1;}
.boardView .contArea .cont_h3Title span { display: inline-block; background: #fff;}
.boardView .contArea .cont_h3Title span:after { content:''; display: inline-block; width:14px; height:13px; margin-left:10px; background: url(../../../images/sf/common/icon.png) no-repeat -203px -312px;}
.boardView .contArea .cont_h3Title span strong{ display: inline-block; margin-left: 10px; background: linear-gradient(90deg, #39be4a, #23507b); color: #fff; font-size: 16px; font-weight: 500; padding: 0 50px 0 20px; line-height: 30px; border-radius: 30px}

.boardView .tipBox { position: relative; margin-top:50px; padding:20px; border:1px solid #cfd0d9; border-top-color:#147a69; background:#f9fafc}
.boardView .tipBox .tipTitle { position:absolute; top:-40px; left:-1px; padding:0 20px; color:#fff; font-weight: 500; line-height: 40px; border-radius: 10px 10px 0 0; background:#147a69}
.boardView .tipBox .tipTitle:before { content:''; display: inline-block; width:10px; height:15px; vertical-align: middle; margin-right:7px; margin-top:-5px; background: url(../../../images/sf/common/icon.png) no-repeat -243px -250px;}
.boardView .tipBox>strong { display: inline-block; margin-bottom:10px; color:#000; font-weight: 700;}
.boardView .tipBox .listLine>li { color:#323232; font-weight: 300;}

.boardView .contArea .cont_h3Title.noLine{ margin-bottom: 5px}
.boardView .contArea .cont_h3Title.noLine:before, .boardView .contArea .cont_h3Title.noLine span:after{ display: none;}
.boardView .contArea .cont_h3Title.noLine span{ margin-left: 30px; font-size: 1.7rem; font-weight: 400; color: #323232}
.boardView .contArea .cont_h3Title.noLine span:before{ content: ''; display: inline-block; width: 16px; height: 15px; background: url(../../../images/sf/common/icon.png) no-repeat -354px -68px;}
.boardView .contArea .cont_h3Title.noLine span strong{ background: none; padding: 0; color: #323232; font-weight: 600; font-size: 20px; margin-right: 5px;}
.boardView .tipBox.progres{ margin-top: 0}
.boardView .tipBox.progres .button{ position: absolute; top: 13px; right: 0;}

.boardView .contArea .progressbar{ display: flex; flex-wrap: wrap; width: 85%;}
.boardView .contArea .progressbar li { display: inline-block; width:33%; font-size:16px; font-weight: 500; line-height: 21px;}
.boardView .contArea .progressbar li .bar { position: relative; display: inline-block; width:115px; height:15px; margin:3px 5px; border-radius: 8px; overflow: hidden; vertical-align: top; background:#e7e7e7 }
.boardView .contArea .progressbar li .bar span { display: block; position:absolute; top:0; left:0; height:100%; border-radius: 8px; background: linear-gradient(90deg, #39be4a, #23507b)}

.programInfo { padding:0 15px}
.programInfo>ul { display: flex; flex-wrap: wrap; gap:20px; padding-bottom:40px}
.programInfo>ul li {display: flex;align-items:center;gap:12px;width: calc(33.33% - 13.33px); font-weight: 500; line-height: 1.5;}
.programInfo>ul li:last-child { width:calc(66.66% - 7px)}
.programInfo>ul li i { display: flex; align-items: center; justify-content: center; width:100px; height:100px; flex-direction: column; font-size: 1.5rem; color: #7f7f7f; border-radius: 100%; background:#e8eff2}
.programInfo>ul li i:before {content:'';display: block;width:33px;height:46px;background:url(../../../images/sf/sub/icon.png) no-repeat -194px -848px;}
.programInfo>ul li i.icon1:before{ background-position: -641px -848px; width: 38px}
.programInfo>ul li i.icon2:before { width:28px; background-position-x: -299px;}
.programInfo>ul li i.icon3:before{ background-position: -688px -848px; width: 39px}
.programInfo>ul li i.icon4:before{ background-position: -734px -848px; width: 40px}
.programInfo>ul li i.icon5:before { width:34px; background-position-x: -330px;}

.programInfo>ul li span { display: block; width:calc(100% - 112px); }
.programInfo>ul li span strong { display: block; margin-bottom:10px; font-weight: 700;}
.boardView .activeList_new { margin-top:40px;}
.boardView .activeList_new ul { padding:0 13px 10px; border-top:1px solid #3774d5; background:#f9f9f9}
.boardView .activeList_new li { display:flex; gap:20px; padding:20px 0 10px; border-bottom:1px dashed #cecece}
.boardView .activeList_new li:last-child { border-bottom:0}
.boardView .activeList_new li .thumb { position: static; width:377px; height:170px; overflow: hidden; border:0; background:none;}
.boardView .activeList_new li .thumb:after { display: none}
.boardView .activeList_new li .thumb img { height:auto}
.boardView .activeList_new li dl { width:calc(100% - 397px); display: flex; flex-direction: column; justify-content: space-between;}
.boardView .activeList_new li dt span { display: inline-block; margin-bottom:10px; padding:0 5px; border-radius: 5px; font-size: 15px; font-weight: 300; line-height: 25px; background:#e8eff2}
.boardView .activeList_new li dt strong { display: block; font-weight: 500; font-size: 18px;}
.boardView .activeList_new li dd { font-size:15px; margin-top:5px;}
.boardView .activeList_new li dd.cont { display: -webkit-box; height:40px;  overflow: hidden;  text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 20px;}
.boardView .activeList_new li dd.btnArea { margin:34px 0 0 0; text-align: left;}
.boardView .activeList_new li dd a.ico_blank:after { background-position:-220px -306px;}

.activeView .activeTitle { display: flex; gap:20px; margin-bottom:35px;}
.activeView .activeTitle .thumb { width:377px; height:170px; overflow: hidden;}
.activeView .activeTitle .thumb img { width:100%}
.activeView .activeTitle dl { width:calc(100% - 397px); display: flex; flex-direction: column; justify-content: space-between; font-size:15px;}
.activeView .activeTitle dt span { display: inline-block; padding:0 5px; border-radius: 5px; font-weight: 300; line-height: 25px; background:#e8eff2}
.activeView .activeTitle dd { margin-top:5px}
.activeView .activeTitle dd.cont { display: -webkit-box; height:80px;  overflow: hidden;  text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical; line-height: 20px;}
.activeView .activeTitle .cateSelect { position: relative; width:300px}
.activeView .activeTitle .cateSelect .button { position: relative; width:100%; text-align: left; font-weight: 600;}
.activeView .activeTitle .cateSelect .button:after { content:''; display: block; position: absolute; top:10px; right:15px; width:6px; height:6px; border-right:1px solid #fff; border-bottom:1px solid #fff; transform: rotate(45deg); transition:transform 150ms ease-in-out;}
.activeView .activeTitle .cateSelect ul { display: none; position: absolute; top:35px; left:0; width: 100%; border:1px solid #ddd; padding:5px 10px; background: #fff; z-index: 2;}
.activeView .activeTitle .cateSelect li { margin:5px 0}
.activeView .activeTitle .cateSelect li a { display: block; line-height: 24px;}
.activeView .activeTitle .cateSelect li a:hover,
.activeView .activeTitle .cateSelect li a:focus { background:#f5f5f5}
.activeView .activeTitle .cateSelect.active .button:after { top:14px; transform: rotate(-135deg);}
.activeView .activeTitle .cateSelect.active ul { display: block;}
.activeView h2 { position: relative; display: inline-block; margin-bottom:10px; font-size:18px; font-weight: 700;}
.activeView h2:before { content:''; display: block; position: absolute; bottom:0; left:0; width:100%; height:5px; background: #fccb48;}
.activeView h2 span { position: relative;}
.activeView .activeConts { border-top:1px solid #23507b; background:#f9f9f9}
.activeView .activeConts:after { content:''; clear:both; display: block;}
.activeView .activeConts dl { float:left; width:100%; padding:7px 5px; border-bottom:1px dashed #d7d8d8}
.activeView .activeConts dt { position: relative; display: inline-block; font-weight: 700; padding-left:15px; vertical-align: top; line-height: 25px;}
.activeView .activeConts dt:before { content:''; display: block; position: absolute; top:9px; left:5px; width:4px; height:4px; background:#454545}
.activeView .activeConts dd { display: inline-block; padding-left:15px; line-height: 25px; }
.activeView .activeConts dd.w100 { margin-top:5px}
.activeView .activeConts .chkOption { display: flex; gap:10px}
.activeView .activeConts .chkOption li { display: flex; flex-direction: column; width:82px; align-items: center; justify-content: center; border-radius: 10px; border:1px solid #c9cdcf; font-size:15px; font-weight: 300; background:#e8eff2;}
.activeView .activeConts .chkOption li:before { content:''; display: inline-block; width:29px; height:31px; margin-top:8px; margin-bottom:2px; background:url(../../../images/sf/sub/icon.png) no-repeat;}
.activeView .activeConts .chkOption li.in:before { width:26px; height:33px; margin-bottom:0; background-position:  -367px -857px;}
.activeView .activeConts .chkOption li.out:before { height:33px; margin-bottom:0; background-position:  -396px -857px;}
.activeView .activeConts .chkOption li.inout:before { display: none;}
.activeView .activeConts .chkOption li.spring:before { background-position:  -701px -368px;}
.activeView .activeConts .chkOption li.summer:before { background-position:  -701px -402px;}
.activeView .activeConts .chkOption li.fall:before { background-position:  -701px -436px;}
.activeView .activeConts .chkOption li.winter:before { background-position:  -701px -470px;}
.activeView .activeConts .chkOption li.chkOn { border-color:var(--krds-light-color-action-secondary-active); color:#fff; background:var(--krds-light-color-action-secondary-active);}
.activeView .activeConts .chkOption li.in.chkOn:before { background-position:  -428px -857px;}
.activeView .activeConts .chkOption li.out.chkOn:before { background-position:  -457px -857px;}
.activeView .activeConts .chkOption li.spring.chkOn:before { background-position:  -733px -368px;}
.activeView .activeConts .chkOption li.summer.chkOn:before { background-position:  -733px -402px;}
.activeView .activeConts .chkOption li.fall.chkOn:before { background-position:  -733px -436px;}
.activeView .activeConts .chkOption li.winter.chkOn:before { background-position:  -733px -470px;}

@media all and (max-width:1023px){
    .programInfo { padding:0}
    .programInfo>ul li { width:calc(50% - 10px)}
    .programInfo>ul li:last-child { width:100%}
    .boardView .activeList_new li .thumb { width:200px; height:auto;}
    .boardView .activeList_new li .thumb img { height:100%}
    .boardView .activeList_new li dl { width:calc(100% - 220px)}
    .boardView .activeList_new li dd.btnArea { margin-top:10px}
}
@media all and (max-width:1000px){
    .boardView .tipBox.progres{ text-align: center; }
    .boardView .contArea .progressbar{ width: 100%; text-align: left;}
    .boardView .tipBox.progres .button{ position: static; margin-top: 20px}
}
@media all and (max-width:800px){
    .boardView .contArea .progressbar{ gap: 10px}
    .boardView .contArea .progressbar li{ width:  calc(50% - 10px)}
}
@media all and (max-width:767px){
    .activeView .activeTitle { flex-direction: column;}
    .activeView .activeTitle .thumb { width:100%; height:auto}
    .activeView .activeTitle dl { width:100%}
    .activeView .activeTitle .cateSelect { width:100%}
    .activeView .activeConts dl { width:100% !important}
}
@media all and (max-width:640px){
    .boardView .activeList_new li { flex-direction: column;}
    .boardView .activeList_new li dl { width:100%}
    .boardView .activeList_new li dd.btnArea { text-align: center;}
}
@media all and (max-width:560px){
    .programInfo>ul { gap:10px}
    .programInfo>ul li { width:100%}
}
@media all and (max-width: 550px){
    .boardView .contArea .progressbar li{ width: 100%}
    .boardView .contArea .progressbar li .bar{ width: 70%}
}
@media all and (max-width:500px){
    .boardView .activeList_new li .thumb { width:100%}
    .boardView .contArea .cont_h3Title span strong{ display: block; margin: 10px 0;}
}




/* 2023 09 01 */
.chkSearchBox .chkLife li.disabled label:before { background-position: -353px 0;}
.chkSearchBox .chkLife li.other label:before { background-position: -417px 0;}
.lifeCycle span.disabled  { background-position:-48px -462px}
.lifeCycle span.other  { background-position:-90px -462px}

@media all and (max-width:1023px){
    .chkSearchBox .chkLife { flex-wrap: wrap;}
    .chkSearchBox .chkLife li { flex:auto; width:33.33%}
    .chkSearchBox .chkLife li:nth-child(4) { border-left:0}
    .chkSearchBox .chkLife li:nth-child(4),
    .chkSearchBox .chkLife li:nth-child(5),
    .chkSearchBox .chkLife li:nth-child(6) { border-top:1px solid #b9d8dd}
}
@media all and (max-width:767px){
    .chkSearchBox .chkLife li:nth-child(3) { border-top:0; border-left:1px solid #b9d8dd}
}
@media all and (max-width:560px){
    .chkSearchBox .chkLife li { width:50%}
    .chkSearchBox .chkLife li:nth-child(3) { border-top:1px solid #b9d8dd; border-left:0}
    .chkSearchBox .chkLife li:nth-child(4) { border-left:1px solid #b9d8dd}
    .chkSearchBox .chkLife li:nth-child(5) { border-left:0}
}

/* 2023 09 07 */
.chkSearchBox.lftMap li label:after{ display: none}


/* 2023 09 08 치유농업 content */
.contWrap .textIntro{text-align: center;}
.contWrap .textIntro:before{content: ''; display: block;background: url(../../../images/sf/sub/subimg3_2.png) no-repeat ;margin: 0 auto 20px auto;}
.contWrap .textIntro strong{display: block;font-size: 25px;font-weight: 600;color: #009640; line-height: normal; padding-bottom: 35px;}
.contWrap .textIntro span{font-size: 18px;line-height: 1.6;}
.contWrap .subSection1{width:100%; margin-top: 50px; margin-bottom: 30px;}
.contWrap .haertBg::before{content:'';display: block; width: 280px; height: 223px;background: url(../../../images/sf/sub/subimg3_1.png);position: absolute;left: calc(50% - 140px);top: calc(50% - 120px);z-index: -1;}
.contWrap .listLow {padding:0 30px;display:flex;flex-wrap: wrap;}
.contWrap .listLow li{width: 50%; text-align: left; padding-left: 50px;}
.contWrap .lineList>li:before{content: ''; display: inline-block; width: 5px; height: 1px; background: #323232; margin-bottom:5px; margin-right: 5px;}

.conIntro1 .textIntro:before{width: 65px; height: 66px;background-position: 0 -20px;}
.conIntro1 .subSection1{padding: 90px; position: relative;text-align: center;}
.conIntro1 .subSection1 strong{font-size: 25px;color: #fff;font-weight: 600;line-height: 45px;position: relative;display: block;}
.conIntro1 .subSection1 span{display: block;width: 27%;position: absolute;font-size: 18px;line-height: 1.5;font-weight: 400;top: 85px;}
.conIntro1 .subSection1>span:nth-child(2){right: calc(50% + 210px); width: 20%; padding-right: 50px;}
.conIntro1 .subSection1>span:nth-child(3){left: calc(50% + 210px);padding-left: 50px;}
.conIntro1 .subSection1>span:nth-child(2):before,.contWrap .subSection1>span:nth-child(3):before{content: ''; display:block; width: 89px; height: 13px; background: url(../../../images/sf/sub/subimg3_2.png) no-repeat -10px -7px;position: absolute;top: 30px; }
.conIntro1 .subSection1>span:nth-child(3):before{left: -59px;}
.conIntro1 .subSection1>span:nth-child(2):before{right: -59px;transform: rotate(180deg);}

.contWrap .baseList h2{font-size: 18px; line-height: 1.5; font-weight: 500; text-align: left;padding-left: 20px;}
.contWrap .baseList h2:before{content:'';display: block; width: 320px;height: 2px; background: #009640; margin-bottom: 10px;margin-left: -20px;}
.contWrap .baseList>li{display: flex;width: 100%;  padding-bottom:30px;}
.contWrap .baseList>li>ul{display: flex; padding-left: 20px;width: 100%;justify-content: space-evenly;flex-wrap: wrap}
.contWrap .baseList .bgList li{width: 45%;}
.contWrap .baseList .bgList .imgBg_box{border-radius: 20px;overflow: hidden; position: relative;background: url(../../../images/sf/sub/imgList1-1.jpg) no-repeat center;background-size: cover;}
.contWrap .baseList .bgList .imgBg_box p{color: #fff;font-size: 18px; line-height: 1.5;padding: 30px;}
.contWrap .baseList .bgList1 .imgBg_box p{padding-top: 250px;}
.contWrap .baseList .bgList1 .imgBg_box strong{display: block;}
.contWrap .baseList .bgList1 .imgBg_box.imgBg2{background:url(../../../images/sf/sub/imgList1-2.jpg)no-repeat center; background-size: cover;}
.contWrap .baseList .bgList2 .imgBg_box p{padding-top: 190px; font-weight: 600;}
.contWrap .baseList .bgList2 .imgBg_box{background:url(../../../images/sf/sub/imgList1-3.jpg) no-repeat center; background-size: cover;}
.contWrap .baseList .bgList2 .imgBg_box.imgBg2{background:url(../../../images/sf/sub/imgList1-4.jpg)no-repeat center; background-size: cover;}

.contWrap .iconList2 {margin-top: 20px;}
.contWrap .iconList2 li{width: 175px; height: 175px; margin: 10px; background: #fff59a; border-radius: 50%; text-align: center;font-size: 18px;font-weight: 400;}
.contWrap .iconList2 li i{width: 80px; height: 80px; position: relative; display: block; margin:40px auto 0;background: url(../../../images/sf/sub/subimg3_2.png)no-repeat;}
.contWrap .iconList2 li:nth-child(1) i{width: 60px; height: 55px; background-position:-175px -166px; margin-bottom: 25px;}
.contWrap .iconList2 li:nth-child(2) i{width: 79px; height: 66px; background-position:-83px -155px;margin-bottom: 14px;}
.contWrap .iconList2 li:nth-child(3) i{width: 65px; height: 57px; background-position:-10px -239px;margin-bottom: 23px;}
.contWrap .iconList2 li:nth-child(4) i{width: 60px; height: 58px; background-position:-83px -238px;margin-bottom: 20px;}

.conIntro1 .subSection3{display: flex;}
.conIntro1 .subSection3 div{width: 33%; text-align: center;margin:20px;}
.conIntro1 .subSection3 div:first-child{margin-left: 0;}
.conIntro1 .subSection3 div:last-child{margin-right: 0;}
.conIntro1 .subSection3 div:nth-child(even) h2{background: #fff59a; color: #009640;}
.conIntro1 .subSection3 h2{font-size: 20px;line-height:30px;padding:20px 0; background: #009640;font-weight: 600; color: #fff;}
.conIntro1 .subSection3 div>ul>li{margin: 65px 5px 0 5px;font-size: 18px;}
.conIntro1 .subSection3 ul>li>ul{font-size: 16px;line-height: 35px; margin-top: 30px;}
.conIntro1 .subSection3 .service ul li::before{content: ''; display: block; background: url(../../../images/sf/sub/subimg3_2.png) no-repeat; margin: 0 auto 20px auto;}
.conIntro1 .subSection3 .service ul li:nth-child(1):before{width: 66px; height: 68px; background-position: -4px -96px;}
.conIntro1 .subSection3 .service ul li:nth-child(2):before{width: 73px; height: 57px; background-position: -4px -173px;}
.conIntro1 .subSection3>div:nth-child(2)>ul>li strong{color: #009640; background: #fff; padding: 0 25px;}
.conIntro1 .subSection3>div:nth-child(2)>ul>li{position: relative}
.conIntro1 .subSection3>div:nth-child(2)>ul>li:before{content: ''; display: inline-block; width: 100%; height: 2px;background: #009640;position: absolute;left: 0; top: 13px;z-index: -1;}
.contWrap .facility ul li::before{content: ''; display: block; background: url(../../../images/sf/sub/subimg3_2.png) no-repeat;margin: 0 auto 20px auto;}
.contWrap .facility ul li:nth-child(1):before{width: 69px; height: 66px; background-position: -106px 0;}
.contWrap .facility ul li:nth-child(2):before{width: 91px; height: 61px; background-position: -182px 0;}
.contWrap .facility ul li:nth-child(3):before{width: 83px; height: 62px; background-position: -81px -74px;}
.contWrap .baseList .culumnBx{display: block; margin-left: 30px;}
.contWrap .baseList .culumnBx li{padding: 5px 0;font-size: 16px; line-height: 30px;}


.conIntro2 .textIntro:before{width: 48px;height: 71px; background-position: -175px -74px;}
.conIntro2 .subSection1 ul{width: 100%;display: flex;color: #fff;font-size: 18px; line-height: 25px;  background:url(../../../images/sf/sub/listbgGreen.jpg) no-repeat; background-size: cover; padding: 20px 0; border-radius: 20px;}
.conIntro2 .subSection1 ul li{width: 20%;text-align: left;padding: 0 30px 0 20px;border-right: 1px solid #fff; font-size: 16px;}
.conIntro2 .subSection1 ul li strong{display: block;font-size: 18px; line-height: 1.5; font-weight: 600; padding-right: 30px; color: #fff59b;padding-bottom:90px; min-height: 150px; box-sizing: border-box;}
.conIntro2 .subSection2 .baseList{padding-top: 50px;}
.conIntro2 .subSection1 ul li span{font-weight: 600;}
.conIntro2 .subSection1 ul li:last-child{border: none;}

.conIntro3 .textIntro:before{width: 72px;height: 77px; background-position: -234px -66px;}
.conIntro3 .haertBg{position: relative; margin:0 auto;font-size: 30px; line-height: 35px; color: #fff;font-weight: 600; padding:50px 0px;text-align: center;}
.conIntro3 .haertBg:before{left: calc(50% - 140px);top: calc(50% - 120px);}
.conIntro3 .contBx h2{font-size: 22px;color: #009640;font-weight: 600;padding:20px 0; position: relative;}
.conIntro3 .contBx h2 span{font-size: 30px;}
.conIntro3 .contBx>span{font-weight: 700; font-size: 18px;}
.conIntro3 .contBx ul{padding: 20px 0; font-size: 16px; line-height: 30px;}
.conIntro3 .contBx:nth-child(odd){padding-right:calc(50% + 40px);text-align: right;}
.conIntro3 .contBx:nth-child(even){padding-left:calc(50% + 40px);}
.conIntro3 .contBx:nth-child(odd) .lineList li:before{display: none;}
.conIntro3 .contBx:nth-child(odd) .lineList li:after{content: ''; display: inline-block; width: 5px; height: 1px; background: #323232; margin-bottom:5px; margin-left: 5px;}
.conIntro3 .contBx h2:before{content: ''; display: block; width: 14px; height: 14px; background: #009640;border-radius: 50px; position: absolute;top: 32px;}
.conIntro3 .contBx:nth-child(odd) h2:before{right: -47px;}
.conIntro3 .contBx:nth-child(even) h2:before{left: -47px;}
.conIntro3 .subSection1{position: relative;}
.conIntro3 .subSection1::before{content: ''; display: block; width: 2px; height: 98%; background: #c6c6c6;position: absolute;left:calc(50% - 1px);z-index: -1;top: 30px;}

.conIntro4 .textIntro:before{width: 72px;height: 69px;background-position: -150px -227px;}
.conIntro4 .baseList li{border-top: 2px solid #c6c6c6;padding: 20px;}
.conIntro4 .baseList .imgArea{position: relative; padding: 45px 45px 0px 15px;}
.conIntro4 .baseList .imgArea img{ width: 80%}
.conIntro4 .baseList .imgArea:before{content: ''; display: block; position: absolute; width: 100%; height: 2px; background: #009640;top: -22px; left: -20px;}
.conIntro4 .baseList .imgArea span{position: absolute;font-size: 20px;line-height: 35px; font-weight: 600;top: 0px; left: 0px;}
.conIntro4 .baseList .textArea{width: 100%;padding-top: 35px; font-size: 16px; line-height: 1.5; position: relative;padding-right: 120px;}
.conIntro4 .baseList .textArea span{display: block; margin: 15px 0 20px; font-weight: 600;}
.conIntro4 .baseList .textArea a{font-weight: 400; background: #e7e7e7; color: #323232; padding: 7px 35px; border-radius: 25px; float: right;margin-top: -58px;margin-right: -120px;}
.conIntro4 .baseList .textArea a:after{content: ''; display: inline-block;width: 14px; height: 14px; background: url(../../../images/sf/common/icon.png) no-repeat -44px -3px; margin-left: 5px; margin-bottom: -2px; }

@media all and (max-width:1231px){
    .conIntro2 .subSection1 ul li:nth-child(1) strong::after {display: none;}
}

@media all and (max-width:1100px){
    .conIntro2 .subSection1 ul li {width: 33%; margin: 10px 0;}
    .conIntro2 .subSection1 ul {flex-wrap: wrap; padding: 0;}
    .conIntro2 .subSection1 ul li {width: 50%; margin: 0px 0;padding: 20px;border-bottom: 1px solid #fff;}
    .conIntro2 .subSection1 ul li:last-child {border-right: 1px solid #fff;}
    .conIntro2 .subSection1 ul li strong{padding: 0 50px 50px 0;}
    .contWrap .listLow li{width: 50%; text-align: left; padding-left: 0px;}
}

@media all and (max-width:900px){
    .contWrap{padding-top: 30px;}
    .contWrap .textIntro strong{font-size: 25px;padding-bottom: 30px;}
    .contWrap .textIntro span{font-size: 20px;line-height: 28px;}
    .conIntro1 .subSection1{padding:30px 0;}
    .conIntro1 .subSection1>span:nth-child(2),.conIntro1 .subSection1>span:nth-child(3){width: 50%;position: static;padding: 90px 0px 50px;float:left;font-size: 20px;}
    .conIntro1 .subSection1>span:nth-child(2):before,.conIntro1 .subSection1>span:nth-child(3):before{display: none;}
    .contWrap .baseList h2:before{width: 100px; margin: 0 auto 10px auto;}
    .contWrap .baseList h2{text-align: center;padding: 0 30px;}
    .contWrap .baseList>li{flex-direction: column;font-size: 18px; margin: 0px auto;}
    .contWrap .baseList>li h2{margin: 0 auto;padding:0;font-size: 20px;}
    .conIntro1 .subSection3 {flex-direction: column;}
    .conIntro1 .subSection3>div{width: 100%; margin-left: 0;}
    .contWrap .baseList>li>ul{padding: 35px 0;justify-content: space-around}
    .conIntro2 .subSection1 ul li strong{font-size: 20px;}
    .contWrap .subSection1{margin: 50px auto 0 auto;padding: 0 0 50px;}
    .conIntro1 .subSection1{padding: 80px 0 50px;}
    .contWrap .baseList .culumnBx{padding: 30px;margin: 0 auto;}
    .contWrap .baseList .culumnBx li{font-size: 18px;}
    .conIntro1 .subSection1 strong{font-size: 25px;}
    .contWrap .baseList .bgList li{width: 48%;}
    .contWrap .haertBg::before{width: 245px; height: 195px; background-size: cover;left: calc(50% - 125px);top: calc(50% - 105px);}
    .conIntro3 .subSection1::before{height: 95%;}
    .contWrap .listLow li{width: 100%; text-align: center;}
    .conIntro1 .subSection3>div:nth-child(2)>ul>li strong{font-size: 20px;}
    .conIntro1 .subSection3 h2{font-size: 20px;}
    .contWrap .iconList2 li{font-size: 18px;}
    .conIntro1 .subSection3 div>ul>li{font-size: 18px;}
    .conIntro4 .baseList>li{flex-direction: row; flex-wrap: nowrap;}
    .conIntro4 .baseList .imgArea{padding: 35px 15px 20px;}
    .conIntro4 .baseList .textArea{padding: 25px 0px;font-size: 18px;}
    .conIntro4 .baseList .textArea a{margin-right: 0;}
}

@media all and (max-width:722px){
    .conIntro4 .baseList .textArea a{margin-top: 0;float: none; width: 100%;display: block;text-align: center;}
}

@media all and (max-width:550px){
    .contWrap .baseList .bgList{flex-direction: column;}
    .contWrap .baseList .bgList .imgBg_box{width: 100%; margin: 20px 0;}
    .conIntro1 .subSection3 {padding-bottom: 30px;}
    .conIntro2 .subSection1 ul li {width: 100%; margin: 10px 0; ; border-right: none; border-bottom: 1px solid #fff;}
    .conIntro2 .subSection1 ul li:last-child{border: none;}
    .conIntro3 .contBx{width: 100%;padding: 0;background-color: #fff; margin: 35px 0;}
    .conIntro3 .contBx:nth-child(even),.conIntro3 .contBx:nth-child(odd){padding-left: 0;padding-right: 0; text-align: center; }
    .conIntro3 .contBx h2{padding: 20px 0 10px; font-size: 20px;}
    .conIntro3 .contBx h2 span{font-size: 22px;}
    .conIntro3 .contBx:nth-child(odd) .lineList li:after{display: none;}
    .conIntro3 .contBx:nth-child(odd) .lineList li:before{display: inline-block;}
    .conIntro3 .haertBg{margin-bottom: 20px;}
    .conIntro3 .contBx>span{font-size: 18px;}
    .conIntro3 .contBx:nth-child(odd) h2:before,.conIntro3 .contBx:nth-child(even) h2:before{position: static;margin: 0 auto 15px auto; margin-top: -25px;width: 10px; height: 10px;}
    .conIntro3 .contBx ul{padding: 10px 0 20px;}
    .conIntro4 .baseList>li{flex-direction: column;align-items: center; border: none;}
    .conIntro4 .baseList .imgArea:before{display: none;}
    .conIntro4 .baseList .imgArea span{width: 100%;text-align: center;position: static;display: block;padding-top: 10px;}
    .conIntro4 .baseList .textArea{padding:20px 30px; background-color: #fbfbfb;}
    .conIntro4 .baseList li {padding:0}
    .conIntro3 .subSection1::before{height:80%;}
    .conIntro1 .subSection1>span:nth-child(2), .conIntro1 .subSection1>span:nth-child(3){ float: none; padding: 80px 0 0; width: 100%;}
    .conIntro1 .subSection1>span:nth-child(3){ padding-top: 40px}
}

/* 2023 10 11 */
.programInfo .activeList{ margin-top: 40px;}
.programInfo .activeList>ul{ margin-bottom: 10px; padding: 10px 10px 25px; border-top: 1px solid #3774d5; background: #f9f9f9;}
.programInfo .activeList>ul li{ display: inline-block; margin: 0 10px 5px 0;}
.programInfo .activeList>ul li a{ display: block; border: 1px solid #a3aab8; border-radius: 5px; line-height: 1.3; font-size: 15px; font-weight: 400; background: #eee; min-width: 250px; padding: 8px 50px 6px 15px; position: relative;}
.programInfo .activeList>ul li a.ico_blank::after{ position: absolute; right: 10px; top: 7px}


/* 2023 10 19 */
.popCont.boardView .programInfo>ul{ gap: 10px;}
.popCont.boardView .programInfo>ul li{ border-bottom: 1px dashed #ccc; padding: 0 0 10px;}
.popCont.boardView .programInfo>ul li i{ border-radius: 10px; width: 75px; height: 60px;}

/* 2023 11 09 */
.in_tabs{ margin-top:-3.2rem}
.in_tabs .txt_info{ background: var(--krds-light-color-surface-gray-subtler); text-align: center; padding: 24px 0; color: #000}
.in_tabs .txt_info::before{ content: ''; display: inline-block; background: url(../../../images/sf/common/icon.png) no-repeat -137px -463px; width: 21px; height: 19px; vertical-align: middle; margin-right: 5px;}
.in_tabs>ul{ background: #fff; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; display: flex; justify-content: center; margin-bottom: 60px}
.in_tabs>ul li a{ display: block; line-height: 1.2; padding: 12px 30px;}
.in_tabs>ul li.active a{ font-weight: 600; font-size: 18px;}
.in_tabs>ul li.active:after{ content: ''; display: block; width: 100%; height: 3px; background: #147a69; margin-bottom: -1px}
.in_tabs h3{ font-size: 23px; position: relative; display: inline-block; font-weight: 700; z-index: 1; margin: 0 0 25px}
.in_tabs h3::before{ content: ''; display: inline-block; position: absolute; bottom: 3px; left: 0; width: 100%; height: 5px; background: #fccb48; z-index: -1;}
.in_tabs .txt_cont{ margin: 0 0 15px; line-height: 1.5;}
.tab_btn.lineH2 li{ display: flex; justify-content: center; align-items: center;}
.tab_btn.lineH2 li a{ padding: 10px 0; line-height: 1.2;}


/* 2023 11 15 */
.starRating { margin:0; text-align:center;}
.starRating .itemRating { display:inline-block; width:31px; height:30px; margin:0 2px; background: url(../../../images/sf/common/icon.png) no-repeat -371px -68px}
.starRating .itemRating.outline { background-position-x: -404px; cursor: pointer;}
.starRating .itemRating.half { background-position: -438px -68px; cursor: pointer;}

.thumbList .rating { display: block; margin: 15px 0 -25px}
.thumbList .rating .itemRating { display:inline-block; width:16px; height:15px; background: url(../../../images/sf/common/icon.png) no-repeat -354px -68px}
.thumbList .rating .itemRating.outline { background-position-y: -85px; cursor: pointer;}
.thumbList .rating .itemRating.half { background-position-y: -102px; cursor: pointer;}



/* 2023 12 18 */
.farmImgScroll > ul{ display: flex; gap: 10px; overflow: hidden; overflow-x: auto;}
.farmImgScroll > ul li{ height: 180px}
.farmImgScroll > ul li img{ height: 100%;}


/* 2024 06 21 */
.nameBox{ background: #f5f5f5; border: 1px solid #cfcfcf; border-radius: 10px; margin: 45px 0 -15px; display: flex; padding: 8px 25px; justify-content: space-between;}
.nameBox div{ display: flex;}
.nameBox div>strong, .nameBox>span{ padding: 3px 0; line-height: 1.5;}
.nameBox div>strong:before{ content: ''; display: inline-flex; background: url(../../../images/sf/common/icon.png) no-repeat -218px -353px; width: 30px; height: 25px; vertical-align: middle; margin-right: 10px;}
.nameBox div>strong{ margin-right: 50px;}
.nameBox>span{ font-weight: 500; font-size: 15px;}
.nameBox>span:before{ content: ''; display: inline-flex; background: url(../../../images/sf/common/icon.png) no-repeat -200px -169px; width: 18px; height: 18px; vertical-align: middle;}
.nameBox>span em{ margin-left: 10px; font-weight: 400;}
.nameBox>span em:before{ content: '\003A'; display: inline-flex; margin-right: 10px;}
.nameBox .listDot li{ font-size: 15px; font-weight: 400;}
.nameBox .listDot li span:before{ content: '\260E'; display: inline-flex; margin: 0 5px 0 15px}

@media all and (max-width: 800px){
    .nameBox, .nameBox div{ display: block;}
    .nameBox .listDot{ background: #fff; margin: 10px 0; padding: 15px;}
    .nameBox .listDot li span{ display: block;}
    .nameBox .listDot li span::before{ margin-left: 0;}
}

/* 2024 09 03 */
.hidden{overflow: hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0 none;clip:rect(0, 0, 0, 0)}


/* 2025 05 21 자격시험공고 */
.testPblanc { width:100%; max-width: 800px; margin:0 auto; padding: 32px 44px 96px; background: #02a384 url(../../../images/sf/sub/bg_testPblanc.png) no-repeat bottom right;}
.testPblanc > h2 { color:#fff; font-size:32px; font-weight: 500; line-height: 1.2;}
.testPblanc > h2 span { display: block; font-size: 56px; line-height: inherit;}
.testPblanc > h2 strong { display: block;}
.testPblanc .test-area { margin-top:36px}
.testPblanc .test-area > h3 { display: inline-block; min-width: 120px; margin-bottom: 16px; text-align: center; border-radius: 6px; color:#fff; font-size: 19px; line-height: 33px; font-weight: 500; background-color: #166344;}
.testPblanc .test-list { padding-left:10px;}
.testPblanc .test-list > li { position: relative; margin-bottom: 4px; padding-left:12px; color:#fff}
.testPblanc .test-list > li .con { margin-bottom:16px}
.testPblanc .test-list > li:before { content:''; display: block; width:6px; height: 6px; border:2px solid #fff; border-radius:100%; position: absolute; top:10px; left:0}
.testPblanc .test-list > li .tit { margin-right: 24px; font-weight: 500; font-size: 19px;}

@media all and (max-width: 767px){
    .testPblanc { padding:40px 36px; background-image: none;}
    .testPblanc > h2 { font-size: 28px;}
    .testPblanc > h2 span { font-size: 48px;}
    .testPblanc > h2 strong { display: inline;}

}


/* 치유농업길잡이 */
.guideCn { display: flex; flex-direction: column; gap:var(--krds-gap-9)}
.guideCn .source { margin-top:10px; font-size: 15px;}
.guideCn .cont-area .tit { margin-bottom: 10px; color:var(--krds-light-color-text-secondary); font-size: var(--krds-pc-font-size-heading-small);}
.guideCn .cont-area .cont-area + .cont-area { margin-top:var(--krds-gap-7)}
.guideCn .cont-area .cont-area .tit { color:var(--krds-light-color-text-basic); font-size: var(--krds-pc-font-size-heading-xsmall)}
.guideCn .cont-area .cont-area .cont-area .tit { margin-bottom: 0; font-weight: normal;}
.guideCn .krds-info-list { gap:0 !important; padding:.8rem 0 .8rem 2rem}
.guideCn .krds-info-list.nobullet { gap:var(--krds-gap-3) !important; padding:1.6rem 0}
.guideCn .krds-info-list.nobullet > li { padding-left:0 !important}
.tab.line.scroll-wrap:not(.full) { margin: 2rem auto 0}


@media all and (max-width: 767px){
    .tab.line.scroll-wrap:not(.full) { margin-top: 0}
}

/* 2025-05-29 회원정보 수정 */
.hfarmer .processArea dt .krds-check-area { display: inline-flex; margin-left:40px; gap:80px; vertical-align: middle;}

/*
.header-utility > .utility-list > li > a:hover { background:#edf1f5}
.header-utility > .utility-list > li > a { display:flex; align-items:center; padding:0 8px; height:32px; border-radius:4px; transition:0.4s ease-in-out}
*/
.header-utility .btnAllmenu a { display:flex; align-items:center; }
.header-utility .btnAllmenu a:before { content: ''; display: inline-flex; width:16px; height:16px; background:url(../../images/sf/default/icon_all_menu.svg) no-repeat; background-size: contain;}