@charset "utf-8"; #pszaContArea .title_Q span { display: inline-block; background: #11881f; color: #fff; padding: .5rem 1.6rem; border-radius: 0 4px 4px 0; margin: 0 0 1.6rem;} #pszaContArea .title_A {display: block; border-top: 1px dashed #d7d9da;margin: 1.6rem 0 0;} #pszaContArea .title_A span { display: inline-block; ;background: #2159b3; font-weight: 500; background: linear-gradient(to right,#18a3c2 30%,#2159b3 80%); color: #fff; margin: 1.6rem 0; padding: .5rem 1.6rem; border-radius: 0 4px 4px 0;} #pszaContArea .title_C span { display: inline-block; ;background: #2159b3; font-weight: 500; color: #fff; margin: 1.6rem 0; padding: .5rem 1.6rem; border-radius: 0 4px 4px 0;} #pszaContArea .title_Z {display: block; border-top: 1px dashed #d7d9da;margin: 1.6rem 0 0;} #pszaContArea .title_Z span { display: inline-block; ;background: #ff8000; font-weight: 500; color: #fff; margin: 1.6rem 0; padding: .5rem 1.6rem; border-radius: 0 4px 4px 0;} #pszaContArea .pszaCont_Q {position: relative;display: block;} #pszaContArea .pszaCont_A {position: relative;display: block;} /* 현장기술지원 */ #pszaContArea {position: relative;display: block;margin:0 3.2rem;background: #fff;border: 1px solid #e3e3e3;padding: 1.6rem;border-radius: .8rem;} #pszaContArea:after {content: '';display: block;box-sizing: border-box;position: absolute;width: 100%;height: 100%;left: 6px;top: 6px;margin: auto;background: url('/ps/img/cmmImg_2020/common/patt_box.png') repeat;z-index: -1;} #pszaCont strong, #pszaCont span, #pszaCont em{ font-size: inherit;} #pszaCont *{ word-break: keep-all} #pszaCont .synops{ margin: 0 0 20px; background: #f9f9f9; padding:1.6rem; border-radius: .5rem;} #pszaCont .synops p.title{position: relative;padding-left: 24px;font-size: 1.9rem;margin-bottom: 10px;font-weight: 500;letter-spacing: -0.05em;color: #323232;} #pszaCont .synops p.title:before {content:'';position:absolute;top:50%;margin-top: -8px;left:1px;width: 16px;height: 16px;border: 5px solid transparent;border-radius:50%;background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)), linear-gradient(101deg, rgba(0,209,197,1) 0%,rgba(5,70,204,1) 100%);background-origin: border-box;background-clip: content-box, border-box;box-shadow:2px 2000px 1px #fff inset;} #pszaCont .synops ul{ padding: 1.6rem;} #pszaCont .synops ul li{ font-size: 15px; color: #323232; } #pszaCont .synops ul li p{ margin-left: 10%; font-size: 15px;} #pszaCont .synops ul li p:before, #pszaCont .synops ul li p:after{ display: inline-block; font-weight: 500} #pszaCont .synops ul li p:before{ content: '[';} #pszaCont .synops ul li p:after{ content: ']';} #pszaCont .synops ul li strong{position: relative;padding-left: 10px;display: inline-block;font-size: 1.5rem;color: #2159b3;line-height: 30px;width: 10%;font-weight: 500;} #pszaCont .synops ul li strong:before {content:'';display: inline-block;width: 3px;height: 3px;background: #2159b3;position: absolute;left: 0;top: 13px;border-radius: 50%;} #pszaCont .pszaContents{ margin: 0 1.6rem 35px;} #pszaCont .pszaContents p.title{position: relative;padding-left: 24px;font-size: 1.9rem;margin-bottom: 10px;font-weight: 500;} #pszaCont .pszaContents p.title:before {content:'';position:absolute;top:50%;margin-top: -9px;left:1px;width: 16px;height: 16px;border: 5px solid transparent;border-radius:50%;background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)), linear-gradient(101deg, rgba(0,209,197,1) 0%,rgba(5,70,204,1) 100%);background-origin: border-box;background-clip: content-box, border-box;box-shadow:2px 2000px 1px #fff inset;} #pszaCont .pszaContents p.title + .txt_p15{ font-size: 17px !important; font-weight: 500; margin-bottom: 10px} #pszaCont .pszaContents p.title2 {color: #2055a3;position: relative;padding: 3px 1.6rem;letter-spacing: -0.05em;font-size: 15px !important;font-weight: 500;margin: 10px;background: #eff7ff;display: inline-block;border-radius: 30px;} #pszaCont .pszaContents p.title + .title2 {margin-top: 0;} #pszaCont .pszaContents strong {font-weight: 500;} #pszaCont .pszaContents p{ font-size: 15px; color: #323232; line-height: 1.4} #pszaCont .pszaContents ul {margin-left: 8px;} #pszaCont .pszaContents ul li{position: relative;font-size: 1.5rem;/* color: #323232; *//* line-height: 1.3; */margin-bottom: 7px;padding-left: 17px;letter-spacing: -.03em;} #pszaCont .pszaContents ul ul, #pszaCont .pszaContents2 ul ul{ margin: 10px 0 0 0} #pszaCont .pszaContents li li, #pszaCont .pszaContents2 li li{ color: #676767; font-size: 14px; padding-left: 10px;font-weight: 300;} #pszaCont .pszaContents ul li i, #pszaCont .pszaContents2 li i{display: inline-block;width: 3px;height: 3px;background: #2f74c3;position: absolute;left: 7px;top: 10px;border-radius: 50%;} #pszaCont .pszaContents2 li li i {content:'';position: absolute;display:inline-block;top: 8px;left:0;width:3px;height:3px;border:solid #666;border-width:1px 1px 0 0;background:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);} #pszaCont .pszaContents2 li i{ background: #323232} #pszaCont .pszaContentsImg_area {clear: both; margin: -1%; text-align: center;} #pszaCont .pszaContentsImg_area span { display: inline-block; padding: 1%; position: relative;width: 30%; height: auto; overflow: hidden;} #pszaCont .pszaContentsImg_area span img {width: 100%;height: auto;} #pszaCont .pszaContentsImg{ text-align: center; margin: 0 1.6rem 35px;} #pszaCont .pszaContentsImg p.title{font-size: 18px;font-size: 1.8rem;/* color: #2f74c3; */margin-bottom: 1.6rem;font-weight: 500;/* border-bottom: 1px solid #7f7f7f; */line-height: 40px;background: #eee;border-radius: 20px;} #pszaCont .pszaContentsImg span{ display: inline-block; margin: 0 10px 10px; position: relative; /* border: 1px solid #7f7f7f; */ width: 300px; height: 204px; overflow: hidden} #pszaCont .pszaContentsImg span img{ height: 100%; text-align: center} #pszaCont .pszaContentsImg span em{ display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.8); color: #fff; font-size: 15px; line-height: 38px; height:38px; overflow: hidden; letter-spacing: -1px} #pszaCont .pszaContents2{ padding: 0 0 20px; background: #fff; margin-bottom: 30px;overflow: hidden;} #pszaCont .pszaContents2 p.title{ color: #222;position: relative;font-size: 1.9rem;margin-bottom: 10px;font-weight: 500;letter-spacing: -0.05em;padding: .5rem 1.6rem;} #pszaCont .pszaContents2 p.title2{ color: #333; font-size: 18px; font-weight: 500; text-align: left; padding: .5rem 1.9rem;} #pszaCont .pszaContents2 p.title3{ color: #333; font-size: 16px; font-weight: 500; text-align: left; padding: .5rem 1.6rem;} #pszaCont .titleS{ color: #333; font-size: 16px; font-weight: 500; text-align: left; padding: 0 0 10px} #pszaCont .pszaContents2 p.title:after{content: '';display: block;position: absolute;height: 1px;width: calc(100% - 2rem);bottom: 0;left: 1.6rem;background: #666;} #pszaCont .pszaContents2 p.title strong{ font-size: 18px; background: #666; margin-bottom: 10px; font-weight: 400; padding: 0 20px; color: #fff; line-height: 1.3; line-height: 35px; position: relative; z-index: 10} #pszaCont .pszaContents2 ul{ text-align: left; margin: 1.6rem;} #pszaCont .pszaContents2 li{ font-size: 15px; color: #323232; line-height: 1.4; margin-bottom: 7px; position: relative; padding-left: 17px;} #pszaCont .point{ margin: 7px 0 0 0; position: relative; padding-left: 17px; color: #fb4700;} #pszaCont .point:before{ content: '※'; display: block; position: absolute; left: 0; top: 0; color: #fb4700; font-weight: 500} #pszaCont .pszaContents2 table{ width: 95%; margin: 5px auto} #pszaCont .pszaContents2 .pCont{ padding: 10px 25px; text-align: left} #pszaCont .pszaContents2 li {overflow-x:auto;} #pszaCont .pszaContents2 table th{ background: #e6e6e6} #pszaCont table th, #pszaCont table td{ border-color: #c3c3c3 !important} #pszaCont .tbl-type01{margin-left:20px;}/*현장지원기술사례 테이블 수정*/ #pszaCont .tbl-type01 p{ text-align: left; } #pszaCont .tbl-type01 p:first-child{ background: #2f74c3; width: 100%; margin: 25px auto 0; line-height: 35px; color: #fff; text-align: center; text-indent: 0} #pszaCont .pszaContents li li i{position: absolute;display: inline-block; width: 5px; height: 1px; left: 0;top:11px; background: #888; margin-right: 5px; vertical-align: middle;border-radius: inherit;} /* 현장 전문가 칼럼 */ #columnWrap{ letter-spacing: -0.03rem; word-break: keep-all;} #columnWrap h1{ width: 100%; height: 70px; background: #1378bf; position: relative; text-align: center} #columnWrap h1:before{ content: ''; display: block; width: 1200px; height: 70px; background: url(../img/nongsaroAdd/expertColumn/columnBg.jpg) no-repeat 0 0; position: absolute; left: calc(50% - 1200px / 2)} #columnWrap h1 a{ display: inline-block; line-height: 70px; position: relative; z-index: 1; font-size: 1.5rem; font-weight: 400; color: #fff;} #columnWrap h1 a:before{ content: ''; display: inline-block; width: 48px; height: 48px; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -220px 0; vertical-align: middle; margin-right: 8px} #columnWrap h1 a strong{ font-weight: 500; color: #ffdf5d; font-size: 1.7rem;} #columnWrap #columnContainer{ position: relative;} #columnWrap #columnContainer:before{ content: ''; display: block; width: 100%; height: 262px; background: #deedfb url(../img/nongsaroAdd/expertColumn/columnBg.jpg) no-repeat 50% -70px; position: absolute; z-index: -1} #columnWrap .realColumn, #columnWrap .detailBtn{ width: 1000px; margin: 0 auto; position: relative} #columnWrap .realColumn:before, #columnWrap .realColumn:after{ content: ''; display: block; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat 0 0; width: 211px; height: 232px; position: absolute; left: 25px; top: 30px} #columnWrap .realColumn:after{ width: 93px; height: 74px; background-position: -220px -159px; left: auto; right: 25px; top: 188px} #columnWrap .columnHead{ padding-top: 50px; text-align: center; height: 211px; position: relative} /* #columnWrap .columnHead *{ display: block} */ #columnWrap .columnHead > h1{ padding: 50px 110px 0 140px; font-size: 2.2rem; color: #444; font-weight: 500; line-height: 1.1; letter-spacing: -0.095rem; height: 125px; overflow: hidden; background: none; width: auto} #columnWrap .columnHead > a{ position: absolute; display: block; top: 60px; height: 240px; width: 760px; left: 0; z-index: 10; font-size: 0; color: transparent} #columnWrap .columnHead > i{ position: absolute; display: block; top: 40px; height: 78px; width: 81px; left: 270px; z-index: 9; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -696px -146px; text-align: center; line-height: 78px; font-size: 18px; color: #332114; font-weight: 500} #columnWrap .columnHead > h1:before{ display: none} #columnWrap .columnHead>span{ position: absolute; width: 100%; text-align: center; top: 55px; line-height: 1.8; font-size: 1.6rem; display: block; left: 0} #columnWrap .columnHead>span strong{ display: inline-block; background: #ea6852; color: #fff; line-height: 1.8; font-weight: 400; padding: 0 1.5rem; margin-right: 1.6rem} #columnWrap .columnHead>div>span{ display: inline-block; color: #747474; font-size: 1.6rem; letter-spacing: 0; padding: 0 1.5rem; font-weight: 300} #columnWrap .columnHead>div span:first-child{ border-right: 1px solid #747474} #columnWrap .columnCont .summary{display: none; background: #1c2e38; color: #fff; font-size: 1.6rem; text-align: center; line-height: 1.8; padding: 0.5rem 1.5em 1.6rem; font-weight: 300; margin: 0 0 2rem} #columnWrap .columnCont h2{margin: 0 1.6rem 1.6rem;position: relative;font-size: 1.4rem;font-weight: 600;color: #1c2e38;border-bottom: 1px solid #3c3e45;padding: 5px 30px 5px 0;display: inline-block;} #columnWrap .columnCont h2:after {content: '';display: inline-block;width:6px;height: 6px;position: absolute;background: #000;right: 0;bottom: -3px;} #columnWrap .columnCont h2>strong{color:#83b458;} #columnWrap .columnCont>p, #columnWrap .columnCont>ul{ margin: 0 1.6rem 2rem; font-size: 1.5rem; font-weight: 400; letter-spacing: 0} #columnWrap .columnCont .point{ font-weight: 500; color: #1378bf} #columnWrap .columnCont>ul li{ margin-bottom: 0.5rem} #columnWrap .columnCont>span, #columnWrap .columnCont>strong{ display: block; margin: 0 1.6rem 0.7rem; font-size: 1.6rem; letter-spacing: 0} #columnWrap .columnCont>div{ margin: 1.6rem} #columnWrap .columnCont .summary + .imgBox{ margin: 0 0 1.6rem;} #columnWrap .columnCont .summary + .imgBox img{ width: 100%} #columnWrap .expertCareer{ background: #fff; border: 3px solid #dfdfdf; padding: 15px 40px; margin: 0 1.6rem 4.8rem} #columnWrap .expertCareer:after{ content: ''; display: block; clear: both} #columnWrap .expertCareer>div{ float: left; width: 40%} #columnWrap .expertCareer>div>strong{ display: block; font-size: 1.7rem; font-weight: 400; margin-bottom: 0.8rem; text-indent: 1.6rem; color: #1378bf;} #columnWrap .expertCareer>div>ul li{ color: #636b70; font-size: 1.5rem; padding-left: 1.6rem; position: relative;} #columnWrap .expertCareer>div>ul li:before{ content: '\2012'; display: block; position: absolute; left: 0; top: -0.1rem;} #columnWrap .expertCareer .nm{ margin-right: 4em; width: auto} #columnWrap .expertCareer .nm span{ display: block; width: 70px; height: 70px; border-radius: 100%; overflow: hidden; margin-bottom: 0.5rem; position: relative} #columnWrap .expertCareer .nm span:before{ content: ''; display: block; width:100%; height: 100%; position: absolute; background: #eee/* url('/ps/img/cmmImg_2020/common/no_img.png') no-repeat 50%*/; background-size: 100px auto;} #columnWrap .expertCareer .nm strong{ text-align: center; text-indent: 0; color: #000;} #columnWrap .expertCareer .nm span img{ width: 90%; position: relative; z-index: 1} #columnWrap .keyword{ margin: 0 1.6rem 0.5rem} #columnWrap .keyword span{ display: inline-block; background: #d8d8c0; line-height: 2; color: #464646; font-size: 1.6rem; padding: 0 1.6rem; margin: 0 0.15rem} #columnWrap .keyword span:before{ content: '\0023'; display: inline-block; color: #464646; font-size: 1.7rem;} #columnWrap .columnBtn{ margin: 0 1.6rem 1.6rem; padding-top: 1.6rem; border-top: 1px solid #d2d2d2; text-align: center; position: relative} #columnWrap .columnBtn button{ background: #fff; border: 2px solid #dfdfdf; height: 47px; border-radius: 100%; cursor: pointer} #columnWrap .columnBtn button:before{ content: ''; display: inline-block; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat} #columnWrap .columnBtn button.recomm{ color: #b3b3b3; font-size: 1.1rem; border-radius: 45px; padding: 0 1.5rem; line-height: 2.1; font-weight: 500} #columnWrap .columnBtn button.recomm.active{ color: #e74327;} #columnWrap .columnBtn button.recomm:before{ background-position: -220px -101px; width: 29px; height: 28px; margin-right: 0.2rem; vertical-align: top; position: relative; top: 0.1rem} #columnWrap .columnBtn button.share, #columnWrap .columnBtn button.print{ position: absolute; right: 0; top: 1.6rem; width: 47px; font-size: 0;} #columnWrap .columnBtn button.share{ right: 50px} #columnWrap .columnBtn button.share:before{ background-position: -220px -132px; width: 32px; height: 24px; position: absolute; left: 5px; top: 9px} #columnWrap .columnBtn button.print:before{ background-position: -254px -101px; width: 30px; height: 26px; position: absolute; left: 6px; top: 9px} #columnWrap .columnBtn .shareBox{ display: none; position: absolute; right: 50px; top: 1.6rem; background: #fff; border: 2px solid #dfdfdf; height: 43px; border-radius: 45px; padding: 0 1.6rem 0 0.5rem; vertical-align: top} #columnWrap .columnBtn .shareBox.active{ display: block;} #columnWrap .columnBtn .shareBox a{ display: block; float: left; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -289px 0; width: 35px; font-size: 0; height: 35px; margin: 4px 0.1rem 0} #columnWrap .columnBtn .shareBox span{ display: block; float: left; font-size: 1.7rem;font-weight: 500; line-height: 35px; margin: 4px 1.6rem 0 0.3rem} #columnWrap .columnBtn .shareBox a.twitter{ background-position: -289px -37px} #columnWrap .columnBtn .shareBox a.blog{ background-position: -289px -74px} #columnWrap .columnBtn .shareBox a.band{ background-position: -289px -111px} #columnWrap .columnBtn .shareBox a.line{ background-position: -327px 0} #columnWrap .columnBtn .shareBox a.kakaotalk{ background-position: -327px -37px} #columnWrap .columnBtn .shareBox a.kakaostory{ background-position: -327px -74px} #columnWrap .columnBtn .shareBox a.close{ background: none; width: 25px} #columnWrap .columnBtn .shareBox a.close:before{ content: '\2573'; display: block; position: absolute; font-size: 1.7rem; line-height: 35px; right: 20px} #columnWrap .detailBtn{ border-top: 1px solid #d2d2d2; padding-top: 1.6rem; text-align: center; margin: 1.6rem auto} #columnWrap .detailBtn a{ background: #0a5f9b; font-size: 1.7rem; color: #fff; display: inline-block; line-height: 40px; padding: 0 3rem} #columnWrap .replyArea{ border: 1px solid #ddd; background: #fff; margin: 0 1.6rem;} #columnWrap .replyArea h2{ background: #f8f8f8; border-bottom: 1px solid #ddd; font-size: 1.1rem; color: #333; padding: 1.6rem} #columnWrap .list_comment{ margin: 0 1.6rem} #columnWrap .list_comment li{ border-bottom: 1px solid #dedede; padding: 1.6rem 0 0;} #columnWrap .list_comment li:last-child{ border-bottom: 0} #columnWrap .list_comment li:after{ content: ''; display: block; clear: both} #columnWrap .list_comment li .comnt{ color: #666; position: relative;} #columnWrap .list_comment li .comnt textarea{ border: 1px solid #ddd; width: 100%; height: 80px; box-sizing: border-box; margin: 0.5rem 0} #columnWrap .list_comment li .comnt textarea + button{ position: absolute; right: 0; top: 38px; margin: 0; display: block; height: 80px; border: 1px solid #ddd; background: #f1f1f1; color: #000; font-size: 1.7rem; padding: 0 2rem} #columnWrap .list_comment li .comnt .usrNm{ font-size: 1.7rem; color: #039aa8; margin-right: 1.6rem; line-height: 30px} #columnWrap .list_comment li .comnt .commt_txt{ line-height: 1.5; font-size: 1.7rem; margin: 1.6rem 0} #columnWrap .list_comment li .comnt .commt_txt img{ max-width: 100%} #columnWrap .list_comment li .comnt .commt_btn{ position: absolute; top: 0; right: 0;} #columnWrap .list_comment li .comnt .commt_btn button{ background: #f1f1f1; border: 1px solid #ddd; line-height: 30px; padding: 0 0.5rem} #columnWrap .list_comment li .comnt .commt_btn button.delete{ background: #0a5f9b; border: 1px solid #0a5f9b; color: #fff} #columnWrap .commt_reply label, .list_comment li .comnt.form label, #columnWrap #usrComnt .comnt label{ font-size: 0; line-height: 0; color: transparent} #columnWrap .commt_reply{ background: #f8fbfe url(../img/cmmCuration/commt_reply.png) no-repeat 10px 20px; padding: 0.6rem 0.6rem 0.6rem 3rem; position: relative} #columnWrap .commt_reply textarea{ margin-bottom: 0 !important} #columnWrap .commt_reply textarea + button.replyS{ top: 48px !important; right: 0.6rem !important} #columnWrap .replyArea input[type='text'], #columnWrap .replyArea input[type='password'], #columnWrap .replyArea input[type='file']{ border: 1px solid #d5d5d5; box-sizing: border-box; height: 30px; border-radius: 0; text-indent: 0.5rem} #columnWrap .commt_reply .commt_btn{ right: 10px !important; top: 10px !important} #columnWrap .list_comment li .comnt.form .inputData{ background: #f9f9f9; border: 1px solid #ccc; width: 140px; height: 23px; margin: 0 5px 5px 0} #columnWrap .list_comment li .comnt.form .inputData.file{ width: 82%; background: #fff} #columnWrap .commt_deleteLayer{ position: absolute; background: #f8f8f8; border: 1px solid #9f9f9f; border-top: 1px solid #0a5f9b; padding: 0.5rem; right: 0; z-index: 9} #columnWrap .commt_deleteLayer label{ display: block; line-height: 1.8; font-size: 15px; color: #323232} #columnWrap .commt_deleteLayer input[type='submit']{ background: #ababab; height: 30px; cursor: pointer; width: 20%; border: 0; position: absolute; right: 0.5rem; bottom: 0.5rem} #columnWrap #usrComnt{ padding-top: 0} #columnWrap #usrComnt .comnt{ padding: 1.6rem 0 0} #columnWrap .replyArea input[type='file']{ width: 80%; margin: 0.3rem 0 0} #columnWrap .replyArea input[type='file'] + button{ background: #f1f1f1; border: 1px solid #ddd; line-height: 30px; padding: 0 0.5rem; margin-top: 0.3rem} #columnWrap .replyArea input[type='file'] + button.delete{ background: #0a5f9b; border-color: #0a5f9b} #columnWrap #usrComnt .comnt>div{ position: relative} #columnWrap #usrComnt .comnt>div textarea + button{ top: 0.5rem} #columnWrap #columnContainer.main:before{ height: 312px} #columnWrap .main .columnHead{ padding-top: 0; height: 312px; margin: 0 50px 0 190px; position: relative} #columnWrap .main .realColumn{ padding: 0 0 3rem;} #columnWrap .main .realColumn:before{ top: 80px} #columnWrap .main .realColumn:after{ top: 238px; right: auto; left: 535px} #columnWrap .main .columnHead:before{ content: ''; display: block; position: absolute; left: 0; bottom: 0; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -370px 0; width: 320px; height: 250px} #columnWrap .main .columnHead>p{ position: absolute; left: 12px; top: 74px; width: 295px; height: 153px; overflow: hidden} #columnWrap .main .columnHead>p img{ width: 100%} #columnWrap .main .columnHead>div{ padding: 60px 0 0 400px; text-align: right; position: relative; z-index: 1; height: 235px; overflow: hidden;} #columnWrap .main .columnHead>div>span{ display: block; text-align: center; position: relative; font-size: 1.7rem; color: #323232; border: 0} #columnWrap .main .columnHead>div>span:before, #columnWrap .main .columnHead>div>span:after{ content: ''; display: block; width: 100px; height: 1px; background: #e74327; position: absolute; top: 13px; left: 0} #columnWrap .main .columnHead>div>span:after{ right: 0; left: auto} #columnWrap .main .columnHead>div>span strong{ display: inline-block; margin: 0 0.2rem} #columnWrap .main .columnHead>div>h2{ margin: 1.6rem 0 0.6rem;font-size: 1.5rem; color: #1378bf; line-height: 1.3} #columnWrap .main .columnHead>div>p{ font-size: 1.5rem; color: #323232; height: 110px; overflow: hidden; line-height: 1.5} #columnWrap .main .searchArea{ background: #fff; border: 7px solid #0a5f9b; padding: 1.6rem 0; text-align: center} #columnWrap .main .searchArea>span, #columnWrap .main .searchArea input[type='text']{ display: inline-block; background: #fafafa; border: 1px solid #d5d5d5; border-radius: 3px; box-sizing: border-box; height: 40px; position: relative; margin: 0 0.1rem; width: 13%} #columnWrap .main .searchArea>span:before{ content: '\25BE'; display: block; position: absolute; right: 0; top: 0; font-size: 1.4rem; color: #94989a; background: #fafafa; height: 100%; line-height: 35px; width: 1.3rem; z-index: 10; text-align: left} #columnWrap .main .searchArea label{ width: 0; height: 0; font-size: 0; position: absolute} #columnWrap .main .searchArea>span select{ background: transparent; display: block; width: 100%; height: 100%; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 10; padding-left: 0.3rem} #columnWrap .main .searchArea input[type='text']{ margin: 0 -0.5rem 0 1.6rem; vertical-align: top; background: #fff; text-indent: 0.5rem; width: 20%} #columnWrap .main .searchArea input[type='submit']{ background: #ff7936; vertical-align: top; color: #fff; font-size: 0.9rem; height: 40px; border-radius: 3px; position: relative; z-index: 1; padding: 0 1.5rem} #columnWrap .main .searchResult{ border-top: 1px solid #d6d6d6; padding-top: 30px} #columnWrap .main .searchResult .lineup{ margin-bottom: 1.6rem; background: #fff; border-bottom: 1px solid #ddd; text-align: center; padding: 0.6rem 0} #columnWrap .main .searchResult .lineup label{ display: inline-block; margin: 0 1.6rem; font-size: 1.7rem; color: #323232; vertical-align: middle; } #columnWrap .main .searchResult .lineup label:after{ content: '\2714'; display: inline-block; vertical-align: middle; width: 20px; height: 20px; line-height: 20px; background: #c4c6c6; border-radius: 100%; position: relative; bottom: 2px; margin-left: 0.3rem; color: #fff} #columnWrap .main .searchResult .lineup input[type='radio']{ position: absolute; width: 0; height: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #columnWrap .main .searchResult .lineup input[type='radio']:checked + label{ font-weight: 500; color: #000} #columnWrap .main .searchResult .lineup input[type='radio']:checked + label:after{ background: #84bf30} #columnWrap .main .searchResult ul:after{ content: ''; display: block; clear: both;} #columnWrap .main .searchResult ul li{ float: left; width: 25%; margin: 0 -1px 0.5rem} #columnWrap .main .searchResult ul li a{ display: block; position: relative; border: 1px solid #e3e3e3; height: 290px; background: #fff;} #columnWrap .main .searchResult ul li a span, #columnWrap .main .searchResult ul li a strong, #columnWrap .main .searchResult ul li a em{ display: block} #columnWrap .main .searchResult ul li a span{ overflow: hidden;} #columnWrap .main .searchResult ul li a span.imgArea{ height: 145px;} #columnWrap .main .searchResult ul li a span.imgArea img{ width: 100%; height: 100%} #columnWrap .main .searchResult ul li a em{ position: absolute; top: 0; left: 0; background: rgba(231,67,39,0.8); line-height: 30px; color: #fff; font-size: 1.5rem; padding: 0 1.6rem} #columnWrap .main .searchResult ul li a strong{ margin: 0.5rem; height: 95px; overflow: hidden; font-size: 1.02rem; line-height: 1.3; color: #323232; font-weight: 500} #columnWrap .main .searchResult ul li a strong span{ margin-top: 0.5rem; font-size: 1.5rem; color: #747474; font-weight: 300; line-height: 1.4} #columnWrap .main .searchResult ul li a strong + span{ margin: 0 0.5rem; color: #a0a0a0; font-size: 0.85rem; letter-spacing: 0} #columnWrap .main .searchResult ul li a .usrNm{ position: absolute; bottom: 0.7rem; right: 0.7rem; color: #1070b3} #columnWrap .commt_deleteLayer button{ position: absolute; right: 0.5rem; top: 35px; height: 30px; background: #666 !important; border: 0; color: #fff; border: 0} #columnWrap .searchResult .noData{ text-align: center; position: relative; font-size: 1.5rem; color: #555} #columnWrap .searchResult .noData:before{ content: ''; display: block; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -694px 0; width: 130px; height: 143px; margin: 3.5rem auto 1.6rem} #columnWrap h3{margin: 0 1.6rem 2rem;font-size: 1.3rem;letter-spacing: 0;font-weight:500; color: #1378bf;} #columnWrap h4{margin: 0 1.6rem 0.5rem; font-size: 1.9rem;letter-spacing: 0;font-weight:500;} #columnWrap .imgBox{margin:30px;padding:0;text-align: center;width:auto;} #columnWrap .imgBox.lft{ text-align: left} #columnWrap .imgBox.mt30{ margin-top: 30px} #columnWrap .imgBox p{ display:inline-block;width: auto; margin: 0 3px 10px 0;text-align: center;color:#111;padding:0; vertical-align: top;font-weight:800;} #columnWrap .imgBox p:last-child{margin: 0;} #columnWrap .imgBox p.w30{ width: 32.9% !important; margin: 0 0 10px 0 !important;} #columnWrap .imgBox p.w40{ width: 45.7% !important;} #columnWrap .imgBox p img{width:100%;} #columnWrap .imgBox em{display:block;width: 100%;font-weight: 400;font-size: .925rem;color: #111;text-align:center;margin: 3px 0;word-break: break-all;} #columnWrap .imgBox strong{font-weight:400;margin:0 0 60px;font-size:14px;color:#888;} #columnWrap .searchResult .imgBox img{width:100%;} #columnWrap .main .searchResult ul li{ position: relative} #columnWrap .main .searchResult ul li a{ z-index: 10} #columnWrap .main .searchResult ul li:before{ content: '농업기술 현장 전문가 칼럼'; display: block; border: 1px solid #e3e3e3; position: absolute; text-align: center; width: 100%; height: 292px; box-sizing: border-box; background: #fff; padding-top: 210px; font-size: 18px; color: #afafaf} #columnWrap .main .searchResult ul li:after{ content: ''; display: block; position: absolute; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -830px 0; width: 102px; height: 178px; left: calc(50% - 102px / 2); top: 25px} #columnWrap .columnCont>ul.listS li{ position: relative; padding-left: 15px} #columnWrap .columnCont>ul.listS li:before{ content: '\25FE'; display: block; position: absolute; left: 0;} #columnWrap .columnCont>ul.decimal, #columnWrap .decimal{ padding-left: 1.6rem} #columnWrap .columnCont>ul.decimal li, #columnWrap .decimal li{ list-style: decimal} #columnWrap .columnCont>ul.hangul li{ padding-left: 1.6rem; position: relative} #columnWrap .columnCont>ul.hangul li:before{ content: '가.'; display: block; position: absolute; left: 0; top: 0; color: #757575;} #columnWrap .columnCont>ul.hangul li:nth-child(2):before{ content: '나.'} #columnWrap .columnCont>ul.hangul li:nth-child(3):before{ content: '다.'} #columnWrap .columnCont>ul.hangul li:nth-child(4):before{ content: '라.'} #columnWrap .columnCont>ul.hangul li:nth-child(5):before{ content: '마.'} #columnWrap .columnCont>ul.hangul li:nth-child(6):before{ content: '바.'} #columnWrap .columnCont>ul.hangul li:nth-child(7):before{ content: '사.'} #columnWrap .columnCont>ul.hangul li:nth-child(8):before{ content: '아.'} #columnWrap .columnCont>ul.hangul li:nth-child(9):before{ content: '자.'} #columnWrap .columnCont>ul.hangul li:nth-child(10):before{ content: '차.'} #columnWrap .columnCont>ul.hangul li:nth-child(11):before{ content: '카.'} #columnWrap .columnCont>ul.hangul li:nth-child(12):before{ content: '타.'} #columnWrap .columnCont>ul.hangul li:nth-child(13):before{ content: '파.'} #columnWrap .columnCont>ul.hangul li:nth-child(14):before{ content: '하.'} #columnWrap .conNotice{ text-align:center; margin-right:1.6rem; margin-top:-2rem; margin-bottom:3rem; color:#888; letter-spacing:-0.01rem; text-align:right;} #columnWrap .pointDiv:before, #columnWrap .pointDiv:after{ content: '\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B\271B'; display: block; width: 100%; overflow: hidden; font-size: 0.6em; padding: 1.6rem 0} #columnWrap .columnCont>div.pointDiv h4{ margin-left: 0} /*20190322*/ #columnWrap .imgBox p.bigPad30{width:31.7% !important; margin-right:20px !important; } #columnWrap .imgBox p.bigPad30:last-child{margin-right:0px !important; } #columnWrap .imgBox p.bigPad40{width:44.7% !important; margin-right:20px !important;margin-bottom:20px; } #columnWrap .imgBox p.bigPad40:nth-child(even){margin-right:0px !important; } /* 2019 05 22 */ #columnWrap .mainNoti{ background: #0b5487; border-top: 1px solid #053557; padding: 5px 0} #columnWrap .mainNoti > div{ width: 1000px; margin: 0 auto; position: relative} #columnWrap .mainNoti > div > p{ font-size: 15px; color: rgba(255,255,255,0.7); padding-left: 75px;} #columnWrap .mainNoti > div > p:before{ content: '\00A1'; display: block; position: absolute; left: 27px; top: 9px; width: 26px; height: 26px; border: 2px solid #f1ede8; box-sizing: border-box; border-radius: 50%; text-align: center; line-height: 1.1; font-weight: 500; color: #fff} #columnWrap .mainNoti > div > a{ display: block; position: absolute; right: 0; top: 6px; line-height: 30px; background: #16a8ff; border-radius: 3px; padding: 0 10px; font-size: 15px;} #columnWrap .mainNoti > div > a:before{ content: ''; display: inline-block; background: url(../img/nongsaroAdd/expertColumn/columnImg.png) no-repeat -261px -136px; width: 17px; height: 18px; vertical-align: middle; margin: -3px 3px 0 0} /* 2019 07 03 */ #columnWrap .m_scrollTable { overflow: auto;margin-bottom:60px} #columnWrap .m_scrollTable table{ border-collapse: collapse; width: 100%; min-width: 767px;margin-bottom:10px} #columnWrap .m_scrollTable table th{ background: #f4f4f4; border: 1px solid #d1d1d1; color: #000; font-size: 16px; font-weight: 500; text-align: center; padding: 8px} #columnWrap .m_scrollTable table th:first-child {border-left:0;} #columnWrap .m_scrollTable table th:last-child {border-right:0;} #columnWrap .m_scrollTable table td{ background: #fff; border: 1px solid #d1d1d1; font-size: 15px; padding: 5px; text-align: center} #columnWrap .m_scrollTable table td:first-child {border-left:0;} #columnWrap .m_scrollTable table td:last-child {border-right:0;} #columnWrap .m_scrollTable p{font-size: 15px;margin: 5px 0 5px;color: #ec3d00;font-weight: 400;} #columnWrap .columnCont h2>strong{color:#48765c;} #columnWrap .imgBox em strong{color:#1378bf;} #columnWrap .m_scrollTable .table_point {text-align: center; display: block; color: rgb(51, 51, 51);} /*2019 08 06*/ .consultBtn a{background:#1378bf;border-radius:3px;display:inline-block;padding:2px 10px;color:#FFF;font-size:15px;font-weight:400;margin-left:10px;} #columnWrap .boxStyle1{position: relative;border: 1px dashed #ccc; padding:20px;margin:0;overflow: hidden;} #columnWrap .boxStyle1 h3{margin:0 !important;margin-top:20px !important; font-size: 1.1rem !important;color:#111 !important;} /*2019 08 28*/ #columnWrap .boxStyle1 li:before { line-height: 5.0; position: absolute; top: 10px; left: 0px; width: 5px; height: 5px; margin: 5px 8px 5px 8px; padding-left: 15px; background: none; border: 3px solid #5fa503; } /* ---------------------------------------------------------------------------------------------------- 2021 06 14 _추가요청 ---------------------------------------------------------------------------------------------------- */ #columnWrap .clearfix::before, #columnWrap .clearfix::after {content: ' '; display: table; } #columnWrap .clearfix::before, #columnWrap .clearfix::after {clear: both;} #columnWrap .columnCont {display: block;} #columnWrap .columnCont > .column-writer {background-color: #efefef;display: inline-block;padding: 5px 10px;border-radius: 30px;font-size: 14px;} #columnWrap .columnCont .imgBox {margin-bottom: 40px;} /* 2021.04.29 추가. */ #columnWrap .m_scrollTable .p-orange { color: #ec3d00; } #columnWrap .m_scrollTable .p-darkgray { color: #333; } #columnWrap .m_scrollTable .p-gray { color: rgb(110, 110, 110); } #columnWrap i::before { content: '\2714';padding-right: 10px;} #columnWrap .list-ordered li { margin-bottom: 20px;} #columnWrap #BoxStyle1 em { color: #545454;} /* 2021.05.27 추가 */ #columnWrap .columnCont>p, #columnWrap .columnCont>ul { font-size: 1.7rem;} #columnWrap .columnCont>ul li { overflow: hidden; } #columnWrap .list-samgak-bullet li {padding: 0 0px 3px 14px;position: relative; line-height: 24px;} #columnWrap .list-samgak-bullet li::before {content: '▶';position: absolute;color: #676767;font-size: 10px; left: 0px;top: 0px;} #columnWrap .h3_wrap { text-align: center;} #columnWrap .h3_deco-quotation-marks {padding: 0 20px;position: relative;text-align: center;display: inline-block;} #columnWrap .h3_deco-quotation-marks::before {content: '\3003';position: absolute;color: #6a9ec3;font-size: 1.1rem;left: -12px;top: -7px;} #columnWrap .h3_deco-quotation-marks::after {content: '\3003';position: absolute;color: #6a9ec3;font-size: 1.1rem;right: -12px;top: -7px;} #columnWrap .list-inside { position: relative; } #columnWrap .list-inside .list-inside-lists { margin-top: 5px; } #columnWrap .list-inside .list-inside-lists::before { content: '';position: absolute;top: 12px;left: 13px;width: 6px;height: 1px;background-color: #848484;} #columnWrap .line-dott { color: #ddd; border: 1px dotted; } /*이미지 내 bottom글자+background블랙*/ #columnWrap .tapeImg span{display: block; text-align: center; position: relative;} #columnWrap .tapeImg span:after{content: ''; width: 100%; height: 45px; background: #000; position: absolute; bottom:0; left: 0; opacity: .5} #columnWrap .tapeImg em{display: block; width:100%; position: absolute; bottom: 10px; color: #fff !important; z-index: 5} /*이미지 내 bottom글자+background블랙+하단 여백 추가*/ #columnWrap .tapeBlock span{display: block; padding-bottom: 45px; text-align: center; position: relative;} #columnWrap .tapeBlock span:after{content: ''; width: 100%; height: 45px; background: #000; position: absolute; bottom:0; left: 0; opacity: .5} #columnWrap .tapeBlock em{display: block; width:100%; position: absolute; bottom: 10px; color: #fff !important; z-index: 5} #columnWrap .img_box-50{ overflow: hidden;}/*width50%, 왼쪽이미지+오른쪽 설명*/ #columnWrap .img_box-50 { border: 1px solid #ececec; } #columnWrap .img_box-50 div::after{content: ''; clear: both; display: block} #columnWrap .img_box-50 div + div { border-top: 1px solid #ececec; } #columnWrap .img_box-50 span{float: left;} #columnWrap .img_box-50 span:nth-child(1){ width: 50%;} #columnWrap .img_box-50 span:nth-child(1) em { display: block;font-size: 0.8em; text-align: center;margin:5px 0 !important;} #columnWrap .img_box-50 span:nth-child(1) img{width: 100%; object-fit: cover} #columnWrap .img_box-50 span:nth-child(2){ width: 50%; padding: 5px 0 0 25px; border-left: 0px solid #ccc;} #columnWrap .img_box-50 span em{display: block; padding: 0 0 11px; margin: 0 0 11px; text-align: left; border-bottom: 1px solid #ccc;} #columnWrap .img_box-50 span em:nth-last-child(1){border: 0; padding: 0 !important; margin: 0} #columnWrap .img_box-50 strong{display: inline-block; padding:5px 25px; margin: 10px 0px 10px; color: #fff !important; font-weight: normal; background: #676767; border-radius: 50px} #columnWrap .img_box-50 i{display: block;} #columnWrap .columnCont>ul {} #columnWrap .img_box-50 span li li {padding-left: 12px;font-size: 0.925em;color: #666;} #columnWrap .img_box-50 + .img_box-50 {margin-top: 20px !important;} #columnWrap .cuImg{margin:0} #columnWrap .cuImg span{width: 100%; margin-bottom: 15px;} #columnWrap .cuImg p{font-size: .9em !important; text-align: center}/*출처*/ #columnWrap .cuImg img{width: 100%} #columnWrap .imgType50{margin:0 0 15px} #columnWrap .imgType50 span{width: 100% !important; text-align: center !important} #columnWrap .imgType50 span:nth-child(2){border-left:0} #columnWrap .cuRound li, #columnWrap .rndType li{border-right: 0} #columnWrap .oType2 li, #columnWrap .oType3 li{width: 100%} #columnWrap .imgType2{}/*이미지 2개일때*/ #columnWrap .imgType2 span{float: left; width: 49.5%;} #columnWrap .imgType2 span:nth-child(even){float: right; } #columnWrap .imgType3{}/*이미지 3개일때*/ #columnWrap .imgType3 span{float: left; width: 32.75%;} #columnWrap .imgType3 span:nth-child(1){margin-right:10px} #columnWrap .imgType3 span:nth-last-child(1){float: right; } #columnWrap .imgType4{}/*이미지 4개일때*/ #columnWrap .imgType4 span{float: left; width: calc(25% - 10px); margin-right:13px} #columnWrap .imgType4 span:nth-last-child(1){margin-right:0px} #columnWrap h4:before, #cu_container h4:after { display: inline-block;padding: 0 4px 5px;} #columnWrap h5 { text-align: center; font-size: 1.9rem; margin: 20px 0 20px 20px; display: block; } #columnWrap h5:before{ content: '\276e'; } #columnWrap h5:after { content: '\276f';} #columnWrap h5 > .p-contents { font-size: 12px; color: #7d7d7d; display: inline-block;padding: 0 0 0 25px;} #columnWrap .img-left { display: inline-block;} #columnWrap .point-text {position: relative;} #columnWrap .point-text::before { content: '';display: inline-block;position: absolute; bottom: 2px;left: 0;z-index: -1;width: 100%;height: 8px;background: #ffddca;} #columnWrap .ul_indentation { margin: 10px 0 0 0 } #columnWrap .ul_indentation > .li_indentation::before {content: '└' !important;position: absolute; color: #676767;font-size: 10px;left: 0px;top: 0px; } #columnWrap .tinimg{width:100%;} #columnWrap .pointblue{color:blue;} #columnWrap .msgbox{border:1px solid #000;padding:.6rem;margin-top:3px;} @media all and (max-width:767px){ body{ background: #fff;} #columnWrap .realColumn, #columnWrap .detailBtn{ width: 100%} #columnWrap h1{ overflow: hidden} #columnWrap .columnHead{ height: auto; padding: 0} #columnWrap .realColumn:before, #columnWrap .realColumn:after, #columnWrap #columnContainer:before{ display: none} #columnWrap .columnHead > h1{ padding: 1.6rem 0.5rem; height: auto; text-align: left; font-size: 1.6rem;} #columnWrap .columnHead>span{ position: static; margin: 0.5rem 0; width: auto} #columnWrap .columnHead>span+div{ padding: 0.3rem 0; border-bottom: 3px solid #c5c5c5; text-align: left;} #columnWrap .columnHead>div>span{ color: #000; padding: 0 0.5rem; } #columnWrap .columnHead>div span:first-child{ border: 0;} #columnWrap .columnHead>span{ text-align: left; margin-left: 0.5rem} #columnWrap .columnCont .summary{ background: #f1f1f1; color: #000; padding: 0.5rem; text-align: left;} #columnWrap .expertCareer .nm span{ display: none} #columnWrap .expertCareer{ padding: .5rem;} #columnWrap .expertCareer>div, #columnWrap .expertCareer .nm{ float: none; margin: 0; text-align: left; padding: 0.8rem 1.6rem; width: auto;} #columnWrap .expertCareer .nm{ background: #f1f1f1; padding: 0.3rem 0;} #columnWrap .expertCareer .nm strong{ font-size: 2rem; margin-bottom: 0} #columnWrap .expertCareer>div>strong{ text-align: left} #columnWrap .columnBtn button.print{ display: none} #columnWrap .columnBtn button.share{ right: 0} #columnWrap .columnCont h2, #columnWrap .columnCont>p, #columnWrap .columnCont>ul, #columnWrap .columnCont>span, #columnWrap .columnCont>strong, #columnWrap .expertCareer, #columnWrap .keyword, #columnWrap .columnBtn, #columnWrap .replyArea{ margin-left: 0.5rem; margin-right: 0.5rem;} #columnWrap .detailBtn{ border: 0} #columnWrap .columnBtn .shareBox{ right: 0; top: 0.5rem; border-radius: 0; width:100%; height: auto; padding: 0 0 2rem; z-index: 1; position: relative; border: 0; border-top: 2px solid #cacaca; background: #f9f9f9} #columnWrap .columnBtn .shareBox span{ float: none; border: 1px solid #ddd;border-top: 0; font-size: 1.9rem; margin: 0; padding: 0.3rem 0; background: #fff} #columnWrap .columnBtn .shareBox span:after{ content: '하기'; display: inline-block;} #columnWrap .columnBtn .shareBox a{ display: inline-block; float: none} #columnWrap .columnBtn .shareBox a.close{ position: absolute; right: 0; top: 0} #columnWrap .columnBtn .shareBox a{ width: auto; min-width: 35px; margin: 0.1rem 0.3rem} #columnWrap .list_comment{ margin: 0 0.5rem} #columnWrap .list_comment li .comnt .usrNm{ font-size: 1.1rem} #columnWrap .list_comment li .comnt .usrNm + span{ display: block; color: #a9a9a9; font-weight: 300; letter-spacing: 0} #columnWrap .list_comment li .comnt textarea + button{ position: static; top: 0 !important; height: auto; width: 100%; margin-top: -1.6rem; z-index: 1; padding: 0.8rem 0 0.5rem} #columnWrap .commt_reply input[type='text'], #columnWrap .commt_reply input[type='password'], #columnWrap #usrComnt .comnt>div input[type='text'], #columnWrap #usrComnt .comnt>div input[type='password']{ width: 48%} #columnWrap #usrComnt .comnt>div input[type='file']{ width: 99%} #columnWrap .replyArea input[type='text'], #columnWrap .replyArea input[type='password'], #columnWrap .replyArea input[type='file']{ height: 45px} #columnWrap .list_comment li .comnt .commt_btn{ position: static; margin-bottom: 1.6rem} #columnWrap #usrComnt{ margin-bottom: 0.5rem} #columnWrap .main .columnHead{ margin: 0; height: 200px} #columnWrap .main .columnHead:before{ display: none} #columnWrap .main .columnHead>p{ top: 0; left: 0; width: 100%; height: 200px; border: 7px solid #0a5f9b; border-bottom: 0; box-sizing: border-box; background: #000;} #columnWrap .main .columnHead>p img{ opacity: 0.6} #columnWrap .main .columnHead>div{ padding:2rem 0 0; text-align: center} #columnWrap .main .columnHead>div>span{ color: #fff; display: inline-block; background: #ffdf5d; color: #000; border-radius: 35px; padding: 0 1.6rem} #columnWrap .main .columnHead>div>h2{ padding: 1.6rem 0; color: #fff; margin: 0; text-align: center; font-size: 1.6rem; line-height: 1.2} #columnWrap .main .columnHead>div>p{ display: none} #columnWrap .main .searchArea{ text-align: left; padding: 0.5rem} #columnWrap .main .searchArea>span{ width: 48%; margin-left: 0} #columnWrap .main .searchArea input[type='text']{ margin: 0.3rem 0 0; width: 70%} #columnWrap .main .searchArea input[type='submit']{ margin: 0.3rem 0 0} #columnWrap .main .searchResult .lineup label{ margin: 0 0.3rem} #columnWrap .main .columnHead>div>span:before, #columnWrap .main .columnHead>div>span:after{ display: none} #columnWrap .main .searchResult .lineup{ border: 0; margin-bottom: 0.3rem;} #columnWrap .main .searchResult ul{ margin: 0 0.5rem} #columnWrap .main .searchResult ul li{ float: none; display: inline-block; width: 50%} #columnWrap .moComnHidArea{ display: none} .imgBox p.w40{ width: 100% !important;} #columnWrap .main .searchResult ul li:before, #columnWrap .main .searchResult ul li:after{ display: none} #columnWrap .columnHead > a{ left: 0; top: 0; height: 200px; width: 100%;} #columnWrap .columnHead > i{ left: auto; right: 0; top: -10px} /* 2019 05 22 */ #columnWrap .mainNoti{ background: #0a5f9b} #columnWrap .mainNoti > div{ width: calc(100% - 14px); margin: 0 7px;} #columnWrap .mainNoti > div > p{ padding-left: 65px;} #columnWrap .mainNoti > div > p:before{ width: 40px; height: 40px; left: 10px; font-size: 22px} #columnWrap .mainNoti > div > a{ position: static; margin: 0.5em 0 0; text-align: center} /* ---------------------------------------------------------------------------------------------------- 2021 06 14 _추가요청 ---------------------------------------------------------------------------------------------------- */ #columnWrap .img_box-50 div{margin:0 0 10px} #columnWrap .img_box-50 span{width: 100% !important; text-align: center !important} #columnWrap .img_box-50 span li {text-align: left;} #columnWrap .img_box-50 span:nth-child(2){border-left:0} #columnWrap .img_box-50 span:nth-child(2){border-left:0;padding: 15px;} #columnWrap .img_box-50 strong {display: block; text-align: center} } @media all and (max-width:450px){ #columnWrap .main .searchResult ul li{ width: auto} #columnWrap .commt_deleteLayer{ right: auto; left: 0; width: calc(100% - 1.6rem);} #columnWrap .commt_deleteLayer button{ position: static; height: 45px} #columnWrap .imgBox p.w30{ width:100% !important; } #columnWrap .imgBox p.w30 img{ width:100%; } #columnWrap .imgBox p.w40{ width:100% !important; } #columnWrap .imgBox p.w40 img{ width:100%; } #columnWrap .imgBox p.w25{ width:100% !important; } #columnWrap .imgBox p.w25 img{ width:100%; } #columnWrap .imgBox p.w15{ width:100% !important; } #columnWrap .imgBox p.w15 img{ width:100%; } /*20190322*/ #columnWrap .imgBox p.bigPad30{width:100% !important; margin-right:0px; } #columnWrap .imgBox p.bigPad30:last-child{margin-right:0px !important; } #columnWrap .imgBox p.bigPad40{width:100% !important; margin-right:0px;margin-bottom:0; } #columnWrap .imgBox p.bigPad40:nth-child(even){margin-right:0px !important; } } /* ---------------------------------------------------------------------------------------------------- Board reply ---------------------------------------------------------------------------------------------------- */ .replyArea {position:relative;margin-top: 50px;font-size: 1.5rem;} .replyArea p.tit { font-size: 1.05rem; color:#333; display: block;font-weight: 500;} .replyArea p.tit:after {content: '';display: block;box-sizing: border-box;width: 100%;height: 5px;margin-top: 10px;background: url('/ps/img/cmmImg_2020/common/ptBox_title.gif') repeat;} .replyArea p.tit span {margin-left: 5px;color:#06378e;font-weight: 500;} /*댓글List*/ .replyArea ul.replyList { position:relative; } .replyArea ul.replyList li {padding: 26px 0; border-bottom:1px solid #e3e3e3;} .replyArea ul.replyList li:last-child {border-bottom:0;} .replyArea ul.replyList li > .comnt { position:relative;} .replyArea ul.replyList li .commt_reply { position:relative; background-color: #f1f6fa;display: block; padding: 1.6rem 1.5rem 1.6rem 2rem; /*margin: 1.6rem 0 0;*/} .replyArea ul.replyList li .commt_reply.re:before{display: block; content: ''; position: absolute; left:15px; top:22px; width:9px; height: 9px; border-bottom:1px solid #6d6c76; border-right:1px solid #6d6c76; transform:rotate(90deg);transition: transform 150ms ease-in-out; } .replyArea ul.replyList li > div dl { position:relative;} .replyArea ul.replyList li > div dl dt {font-weight: 500; color: #2159b3; font-size: 1.7rem; margin: 0 0 10px} .replyArea ul.replyList li > div dl dt > span { font-weight: 400;color: #A8A8A8; font-size: 1.3rem; line-height: 19px; margin: 0 0 0 20px; } .replyArea ul.replyList li > div dl dd {color: #5E5E5E; margin: 0 0 .5rem 0; } .replyArea ul.replyList li > div .commt_btn {position: absolute; right: 0; top:0;} .replyArea ul.replyList li .commt_reply.re .commt_btn {position: absolute; right: 1.6rem; top:1.6rem;} .replyArea ul.replyList li > div .commt_btn button {color: #555;font-size: 13px;background: #fff;padding: 1px .6rem;border: 1px solid #c4c4cc;box-sizing: border-box;border-radius: 2px;transition: .5s;} .replyArea ul.replyList li > div .commt_btn button:active {background-color: #f7faff;} .replyArea ul.replyList li > div .commt_btn button.delete {border: 1px solid #c21818;color:#c21818;} .replyArea .replyForm {position:relative; display: block; padding: 1.6rem 1.5rem 1.6rem 1.9rem; margin: 1.6rem 0; background: #f7f7f7;} .replyArea .replyForm.re { background: #f1f6fa; padding: 1.6rem 1.5rem 1.6rem 2rem;} .replyArea .replyForm.re:before{display: block; content: ''; position: absolute; left:15px; top:22px; width:9px; height: 9px; border-bottom:1px solid #6d6c76; border-right:1px solid #6d6c76; transform:rotate(90deg);transition: transform 150ms ease-in-out; } .replyArea .replyForm p { text-align:left; font-size: 16px; color:#101010; position: relative; display: inline-block;} .replyArea .replyForm span {font-weight: 500; font-size: 18px; display:inline-block !important; display: contents; margin-left:4px; display:contents;} .replyArea .comntBox2 {position:relative; margin:1.6rem 0 0 0} .replyArea .comntBox2 textarea { height: 100px; } .replyArea .comntBox2 .reAddBtn { position: absolute; right: 0; top:0; width: 100px; height: 100px; background: #06378e; font-weight: 500; font-size: 1.7rem; display: inline-block; text-align: center; line-height: 100px; color: #fff; border-radius: .6rem;} .replyArea .replyForm.re .comntBox2 .reAddBtn {background: #6d6c76;} .replyArea textarea.commtModArea { width: 100%; height: 80px; background: #FFFFFF; border: 1px solid #C7C7C7;margin: .5rem 0; box-sizing: border-box; border-radius: 3px; padding: 12px 112px 12px 12px;} .replyArea .reModBtn { position: absolute; right: 0; bottom:.9rem; width: 100px; height: 80px; background: #6d6c76; font-weight: 500; font-size: 1.7rem; display: inline-block; text-align: center; line-height: 80px; color: #fff; border-radius: 3px;} .replyArea .replyForm .count { font-size:14px;color:#888; position :absolute; top:56px; right:20%} .replyArea .replyForm .count > span {font-size:14px; color:#444} .replyArea .comntBox1 input { max-width: 20rem; } .replyArea .commt_deleteLayer {position: absolute;right: 0;top: 30px;padding: 1.6rem;background-color: #fff;border: 1px solid #0f0f0f;box-shadow: 2px 3px 7px 0 rgba(16,16,16,.2);-webkit-box-shadow: 2px 3px 7px 0 rgba(16,16,16,.2);z-index: 1;transition: .3s;} .replyArea .commt_deleteLayer input { position: relative; min-width:13rem; padding-right: 3rem;font-size: .9rem; border: 1px solid #C7C7C7; box-sizing: border-box; border-radius: 3px; display: inline-block;vertical-align: middle;height: 2rem;background: #fff; padding: 0 .6rem; } .replyArea .commt_deleteLayer input[type="password"]::-webkit-input-placeholder {font-size:14px;font-weight: 300;color:#999;} .replyArea .commt_deleteLayer input[type="password"]:-moz-placeholder {font-size:14px;font-weight: 300;color:#999;} .replyArea .commt_deleteLayer input[type="password"]::-moz-placeholder {font-size:14px;font-weight: 300;color:#999;} .replyArea .commt_deleteLayer input[type="password"]:-ms-input-placeholder {font-size:14px;font-weight: 300;color:#999;} .replyArea .commt_deleteLayer button.psBtn {position: absolute;right: 1.6rem;top: 1.6rem; width: 3rem; height: 2rem;background: #06378e !important; font-weight: 500;border: 1px solid #06378e !important; color: #fff !important; border-radius: 3px !important;} @media all and (max-width:620px){ .replyArea .replyForm {padding: 1.6rem 1.9rem 1.6rem 1.9rem; margin: .5rem 0;} .replyArea .comntBox2 {margin: .5rem 0 0 0;} .replyArea .comntBox2 textarea { height: 70px;padding: 12px 60px 12px 15px;} .replyArea .comntBox2 .reAddBtn { width: 80px; height: 70px; line-height: 70px;} } @media all and (max-width:425px){ .replyArea textarea.commtModArea { height: 60px; padding: 7px 67px 7px 12px; } .replyArea .reModBtn { width: 60px;height: 60px; line-height: 60px; } } @media all and (max-width:350px){ .replyArea ul.replyList li > div dl dt > span {display: block;margin: 0;} } /* ---------------------------------------------------------------------------------------------------- Board reply ---------------------------------------------------------------------------------------------------- */ @media screen and ( max-width:767px){ #pszaContArea {margin: 0 .5rem;} #pszaCont .synops {background: #fff; padding: 0;} #pszaCont .synops ul{ padding: 0rem;margin-left: 1.6rem;} #pszaCont .synops ul li strong {width: auto; margin-right: 1.6rem;} #pszaCont .synops ul li:last-child strong {/*display: block;*/padding-left: 10px;} #pszaCont .synops ul li:last-child p {margin-left: 0;} /*현장지원기술사례 테이블*/ #pszaCont .pszaContents { margin: 0 0 35px;} #pszaCont .pszaContents .tbl-type01{overflow-x: hidden;padding-top: 10px;margin: 30px 0 0 0px;} #pszaCont .pszaContents .tbl-type01::before{padding: 2px 0 2px 82px; position: absolute !important; top: 0; left: 50%; white-space: nowrap; transform: translateX(-50%);} #pszaCont .pszaContents .tbl-type01 div{overflow-x: scroll;} #pszaCont .pszaContents .tbl-type01 div table{width:1000px;} } @media screen and ( max-width:560px){ #pszaCont .pszaContentsImg_area span { width: 48%;} } @media screen and ( max-width:425px){ #pszaCont .pszaContentsImg span {margin: 0 0 10px; width: 100%;height: auto;} #pszaCont .pszaContentsImg span img { width: 100%;} } @media screen and ( max-width:370px){ #pszaContArea { padding: .5rem;} #pszaCont .pszaContents ul {margin-left: 0;} #pszaCont .pszaContentsImg{text-align: center;margin: 0 0 35px;} } /* 2016. 04.19 add 농가맛집 */ .submain_tit .submain.icon08{ padding: 10px 0 8px 109px;} .submain_tit .submain.icon08::after{ background: url(../img/farmlocal/main/icon_farmFood.png) no-repeat;} #farmFood{ margin-top: 10px} .tab_sy5:after, #farmFood .farmBox:after, .farmCont:after, .farmTbl .thumbnail:after, .farmEdu:after{ content: ""; display: block; clear: both} .tab_sy5 li, #farmFood .farmBox li{ float: left;} .tab_sy5 li a{ display: block; background: #dee3d6; border-top: 2px solid #dee3d6; color: #616161; font-size: 16px; font-weight: bold; text-align: center; line-height: 1; padding: 18px 0; margin-right: 1px} .tab_sy5 li.active a{ background: #9fc87a; border-top: 2px solid #509a27; color: #41672a;} #farmFood .line{ font-size: 13px; padding: 0; margin: 20px 0 15px 5px;} #farmFood .line strong{ display: inline-block; margin-left: 5px; vertical-align: top;} .farmBox li{ width: 25%; position: relative} .farmBox li a{ display: block; margin: 0 5px 10px 5px; border: 1px solid #a8a8a8; min-height: 280px; position: relative} .farmBox li a .thumb{ display: block; width: 100%;overflow: hidden; height: 110px; } .farmBox li a .thumb img{ width: 100%; min-height: 120px;} .farmBox li a .farm_tit{ display: block; position: relative; font-size: 15px; font-weight: bold; margin: 10px 10px 15px} .farmBox li a .farm_tit em{ font-size: 13px; font-weight: normal; position: absolute; right: 0; top: 0; color: #509a27} .farmBox li a .farm_cont{ display: block; margin: 0 10px; font-size: 13px; color: #666; line-height: 1.8} .farmDtl{ margin: 30px 5px 0; position: relative} .farmDtl h4{ font-size: 22px; color: #111; letter-spacing: -1px;line-height:26px;} .farmDtl h4 span{ font-size: 16px; color: #509a27; margin-left: 10px} .farmCont{ margin-top: 10px;} .farmPic{ float: left; width: 327px; height: 246px;} .farmPic .largeImg{ width: 100%; height: 194px; text-align: center;} .farmPic .largeImg img{ width: 100%; height: 194px} .farmPic .thumbnail li{ float: left; margin-top: 5px;} .farmPic .thumbnail li a{ display: block; border: 2px solid #fff; width: 62px; height: 47px} .farmPic .thumbnail li.active a{ border-color: #63a53e} .farmPic .thumbnail li a img{ width: 62px; height: 47px} .farmTbl{ float: right; width: 450px; height: 246px; background: #f9f9f9; border-top: 2px solid #509a27; border-bottom: 1px solid #bfbfbf} .farmTbl table{ min-height: 240px} .farmTbl th, .farmTbl td{ border-bottom: 1px solid #ececec; padding: 10px; color: #333; font-size: 14px; vertical-align: top} .farmTbl th{ font-weight: bold; width: 20%;} .farmTbl td{ color: #666} .farmTbl tr:last-child th, .farmTbl tr:last-child td{ border-bottom: 0;} .farmSummary br {} .farmSummary{ clear: both; } .farmSummary.pt0{ padding-top: 0 !important} .farmSummary h5{position: relative;padding-left: 24px;font-size: 2rem;margin: 20px 0;font-weight: 500;letter-spacing: -0.05em;color: #222;} .farmSummary h5:before {content:'';position:absolute;top:50%;margin-top: -7px;left:1px;width: 16px;height: 16px;border: 5px solid transparent;border-radius:50%;background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)), linear-gradient(101deg, rgba(0,209,197,1) 0%,rgba(5,70,204,1) 100%);background-origin: border-box;background-clip: content-box, border-box;box-shadow:2px 2000px 1px #fff inset;} .farmSummary h5:after {display:none} .farmSummary .summary_txt{ padding: 0 1.5rem 1.5rem;color: #676767; border-bottom: 1px dashed #ddd;} .farmSummary .summary_txt:last-child {border-bottom: 0;} .farmSummary .summary_txt.summary_txt2{ margin: 0 0 35px; } .farmSummary .summary_txt strong{ display: block; margin-bottom: 15px; color: #000} .farmSummary>ul.farmPro{position: relative; padding: 0 1.5rem 1.5rem;border-bottom: 1px dashed #ddd;} .farmSummary>ul.farmPro>li{list-style:decimal;margin-left: 1.9rem;color: #676767;font-weight:500;} .farmSummary>ul.farmPro>li>strong{color: #676767;font-weight:500;} .farmSummary>ul.farmPro>li>p{ margin: 5px 0px 20px; line-height: 1.5; color: #676767;font-weight:400;} .farmPhoto{clear:both;width:100%;padding-top:15px;} .farmPhoto h5 {font-size: 1.8rem;margin-bottom: 1.6rem;font-weight: 500;line-height: 40px;background: #eee;border-radius: 20px;text-align: center;} .farmPhoto h5:before, .farmPhoto h5:after {display:none} .farmPhoto>ul{margin: 15px 25px 10px;position: relative;overflow: hidden;text-align: center;} .farmPhoto>ul>li{display: inline-flex;text-align:center;padding:1% 1%;box-sizing:border-box;} .farmPhoto>ul>li .img_thumb{position:relative;display:block;} .farmPhoto>ul>li .img_thumb>a{width:100%;display:block;} .farmPhoto>ul>li .img_thumb>a>img{max-width:100%;height:100px;} .farmPhoto>ul>li .img_thumb .img_txt{display:block;width:100%;color: #4b4b4b;font-size:13px;margin-top: 7px;letter-spacing:-1px; font-weight:500;} #zoomList>.largeImg3{margin: 0px 25px 35px;} #zoomList>.largeImg3>img {max-height:450px;margin: auto; display: block;} .farmDtl_btn{ position: absolute; right: 0; top: -5px} .btn-2-w span{ border: 0; line-height:2.3rem} .btn-2-w.btn-2-g span{ background: #509a27 !important} .submain_tit .submain.icon09{ padding: 10px 0 8px 109px;} .submain_tit .submain.icon09::after{ background: url(../img/farmlocal/main/icon_farmEdu.png) no-repeat;} .farmEdu{ text-align: center; clear: both; background: #dee3d6; border-top: 2px solid #509a27; padding: 10px 0 10px 10px} .farmEdu li{ display:inline-block;} .farmEdu li a{ display: block; margin-right: 5px; background: #b7d69b; text-align: center; line-height: 1; padding: 10px 0; font-size: 16px; color: #245b06; border-radius: 5px} .farmEdu li.active a{ background: #509a27; color: #fff; font-weight: bold} .farmBox.edu{ margin-top: 30px} .farmBox.edu li{ width: 50%; position: relative} .farmBox.edu li a{ display: block; margin: 0 5px 10px 5px; border: 1px solid #a8a8a8; min-height: 92px; position: relative; padding: 11px 13px} .farmBox.edu li a:hover{ background: #ebf7e1; border: 1px solid #509a27} .farmBox.edu li a .thumb{ display: inline-block; width: 125px; float: left; margin-right: 10px} .farmBox.edu li a .thumb img{ width: 100%; min-height: 92px;} .farmBox.edu li a .farm_tit{ display: inline-block; font-size: 15px; font-weight: bold; margin: 0} .farmBox.edu li a .farm_tit em{ font-size: 12px; font-weight: normal; color: #509a27; position: relative; top: -2px; margin-right: 3px} .farmBox.edu li a .farm_cont{ display: block; margin: 8px 0 0 0; font-size: 13px; color: #666; line-height: 1.6} .farmPic .largeImg.largeImg2{ height: 255px !important} .farmPic .largeImg.largeImg2 img{ width: 100%; height: 255px} .farmTbl.farmTbl2{ height: 255px !important} .mapArea{ /*border: 1px solid #bfbfbf;*/ margin-top:20px} /* 2016 04 25 */ .farmBox li a .farm_tit{ margin: 5% 35% 15px 5%; position: absolute; width: 60%;} .farmBox li a .farm_tit em{ right: -50%;} .farmBox li a .farm_cont{ margin: 26% 10px 0; letter-spacing: -1px;} .farmCont.nonImg .farmTbl{ width: 100%} .farmTbl th, .farmTbl td{ padding: 8px; letter-spacing: -1px} .farmBox.edu li a{ min-height: 110px; letter-spacing: -1px; padding: 8px 10px;} .farmBox li a .thumb img{ min-height: 110px;} .farmBox.edu li a .farm_tit{ display: inline-block; font-size: 14px; letter-spacing: -1px; position: relative; width: auto;} .farmBox.edu li a .farm_tit em{ right: 0} .farmBox.edu li a .farm_cont{ font-size: 12px; letter-spacing: -1px; margin: 5px 0 0;} .farmBox.edu li a .thumb img{ min-height: 108px;} .farmTbl.farmTbl2 table{ min-height: auto} .farmCont.nonImg .farmTbl.farmTbl2{ height: 150px !important} /* 2017 10 11 접근성 명도대비 추가 */ .visual_area .left_wrap .l_title{ color: #0F550C;} .visual_area .img_bx h4, .in-search .btn_search{ background: #555;} .board_area .btn_more{ font-size: 13px; background-position: 0 14px; top: 5px; padding: 8px; color: #333;} .board_area .location-tit{ color: #000} .banner_area .food_area h4, .banner_area .food_area .desc strong, .banner_area .food_area .desc p span{ background: #693009;} .banner_area .green_wrap h4, .banner_area .green_wrap .l_title{ color: #174C33} .banner_area .green_wrap .s_title, .banner_area .green_wrap ul li p, .banner_area .edu_wrap .s_title, .green_banner_area li p, .desc_bx p{ color: #333} .banner_area .edu_wrap h4, .banner_area .edu_wrap .l_title{ color: #004455} .banner_area .brend_wrap h4, .banner_area .brend_wrap p, .desc_bx strong{ color: #2B5613} #lista1 .als-item a{ font-size: 14px;} .green_step_area li div.step04_01 > strong, .green_step_area li div.step04_02 > strong{ color: #2B5613} .green_step_area li div.step04_02 > strong{ color: #004455} .green_banner_area li strong.green{ color: #005D26} .search_bx .search_btn{ background: #005D26} .location-tit, .section .list_tit, .submain_tit p{ color: #333} .label-green{ background: #005D26; border-radius: 24px; padding: 0 15px;} .label-green span{ background: none; padding: 0} .farmEdu li a, .farmBox.edu li a .farm_tit em, .farmBox li a .farm_tit em{ color: #1B4306} .farmEdu li.active a{ background: #1B4306; color: #fff} .farmBox.edu li a .farm_cont, .farmTbl td{ color: #333} .btn-2-w.btn-2-g span{ background: #1B4306;} .tab_sy5 li.active a{ color: #000} .submain_tit .food_list li a:hover{color:#fff; background-color:#524E43} .pic-list02.list5 ul li .pic .con{ opacity: 0.9;} .edu.farmBox li a .farm_tit em { color: #34631a;} .banner_area .green_wrap .l_title { color: #333;} .farmTab{margin-top:10px;overflow:hidden;margin-bottom:-10px;} .farmTab .tablink{width:calc(25% - 0px);color:#111;font-weight:600;background:#FFF;border:1px solid #ccc;border-right:0px solid #559d4c;font-size:16px;border-bottom:0;box-sizing:border-box;} .farmTab .tablink.active{ background: #509a27;color:#FFF;font-size:16px;} .farmTab .tablink:hover {background: #f6f6f6;color:#111;font-size:16px;} .farmTab .tablink:nth-child(4n){border-right:1px solid #ccc;padding-right:1px;} #farmFood .f_tabcontent{background:#FFF;padding: 60px 0px 0px;height:auto;} .farmTbl.farmTbl2 a{border-radius:2px;background:#3F51B5;color:#ffffff;font-size:13px;padding:0 8px;line-height:23px;display:inline-block } .farmEdu2{ text-align: center; clear: both; background: #dee3d6; border-top: 2px solid #509a27; padding: 10px 0 10px 10px} .farmEdu2 li{ display:inline-block;} .farmEdu2 li a{ display: block; margin-right: 5px; background: #d2d8c9; font-weight:300;text-align: center; line-height: 1; padding: 10px 0; font-size: 16px; color: #8ea083; border-radius: 5px;cursor: default;} .farmEdu2 li.active a{ background: #509a27; color: #fff; font-weight: bold} .farmEdu2 li.on a{ background: #b7d69b; color: #245b06;cursor: pointer; font-weight:500;} .farmEdu2 li.on.active a{background: #1b4306; color: #fff; font-weight:500;} .farmPlace_tp{height:221px;width:100%;background: url(../img/farmlocal/img_cleanFarmPlace.jpg) no-repeat;display:block;margin-top:20px;} .farmPlace_tp>strong, .farmPlace_tp>p{display: block; text-indent:-99999px;} @media all and ( max-width:767px){ .farmSummary h5{font-size: 1.8rem;margin: 10px 0;} .farmSummary>ul.farmPro{ padding: 0 .5rem 1.5rem;font-size: .925rem;} .farmSummary .summary_txt {font-size: .925rem;padding: 0 .8rem 1.5rem;} .farmPhoto h5 {font-size: 1.7rem;} .farmPhoto>ul{margin: 1em 0.5em 2em;} .farmPhoto>ul>li{text-align:center;padding:1% 1%;box-sizing:border-box;} .farmPhoto>ul>li .img_thumb{position:relative;display:block;} .farmPhoto>ul>li .img_thumb>a>img{max-width:100%;height:50px;} .farmPhoto>ul>li .img_thumb .img_txt{display:block;width:100%;color: #4b4b4b;font-size:12px;margin-top: 7px;letter-spacing:-1px; font-weight:400;} #zoomList>.largeImg3{margin: 1em 0.5em 2em;} #zoomList>.largeImg3>img {max-height:300px;} .farmTab{margin-bottom:0;} .farmTab .tablink{width:calc(25% - 0px);color:#111;font-weight:600;background:#FFF;border:1px solid #ccc;border-right:0px solid #559d4c;font-size:16px;border-bottom:0;box-sizing:border-box;padding:1em 0em;} .farmPlace_tp{background: transparent;height: auto;padding:10px;box-sizing:border-box;} .farmPlace_tp>strong{text-indent:0;color:#1f4ab8;font-size:2em;letter-spacing: -0.1em;line-height:2em;} .farmPlace_tp>p{text-indent:0;color:#1f4ab8;font-size:1.2em;letter-spacing: -0.1em;} } /*=======2022 신규 작성========*/ .ctsColumn{width: 1200px;/* min-width: 320px; */margin: 0 auto !important;padding: 0 0 50px;font-size: 106%;font-weight: 300;color:#282828;} .ctsColumn *{box-sizing: border-box; vertical-align: top;} /*컬러-기본 녹색*/ .colorType1{}/*보라 - #ba3ce4*/ .colorType1 .txtClmn::before{ background: #ba3ce4;} .colorType1 .txtClmn h5{color: #ba3ce4;} .colorType1 .txtClmn p em:before, .colorType1 .txtWide p em:before{background: #ffccf9 !important;} .colorType2{}/*빨강 - #ba3ce4*/ .colorType2 .txtClmn::before{ background: #f25a57;} .colorType2 .txtClmn h5{color: #f25a57;} .colorType2 .txtClmn p em:before, .colorType2 .txtWide p em:before{background: #ffd4dc !important;} .colorType3{}/*빨강 - #ba3ce4*/ .colorType3 .txtClmn::before{ background: #0d86f7;} .colorType3 .txtClmn h5{color: #0d86f7;} .colorType3 .txtClmn p em:before, .colorType3 .txtWide p em:before{background: #bcefff !important;} /*머리, 시작*/ .ctsColumn header{} .ctsColumn header h4{padding:50px 0 30px;margin: 0 0 30px 0 !important;text-align: center;font-size: 1.0em;border-bottom: 1px solid #c1c1c1;font-weight: 600 !important;} .ctsColumn header h4 span{font-weight: 300; font-size: 2.6em;} .ctsColumn header h4 span,.ctsColumn header h4 strong{display: block;color:#282828;} .ctsColumn header h4 strong{font-size: 4.5em;} .ctsColumn header p{} .ctsColumn header p strong{font-weight: 500;} .ctsColumn header em{display: block;padding: 7px 15px;margin-top:20px;font-size: .889em;border: 1px solid #ccc;background: #f5f5f5;word-break: break-all;} /*문단 구분*/ .ctsColumn section{ margin: 200px 0 50px; } .ctsColumn section::after{content: ''; clear: both; display: block;} /*사진 왼쪽 정렬*/ .layoutLeft{position: relative;} .layoutLeft::after{content: ''; clear: both; display: block;} .layoutLeft .imgClmn{float: left;} .layoutLeft .txtClmn{right: 0;} .layoutLeft .txtClmn div{float: right;} .imgClmn{ width: 400px;} .txtClmn{ width: 80%; position: absolute; top: 64px; z-index: 1;} .txtClmn::before{content: '';display: block; height: 7px; background: #75a11b;} .txtClmn div{width: 740px; padding-top: 50px;} .txtClmn h5{font-size: 1.778em !important;font-weight: 500;color: #75a11b;margin: 0 0 20px 0 !important;text-align: left !important;} .txtClmn h5::before{display: none;} .txtClmn h5::after{display: none;} .txtClmn p{margin-bottom: 25px; position: relative;} .txtClmn p em{display:inline-block; padding: 0 3px; position: relative;} .txtClmn p em:before{content:'';width: 100%; height: 12px; background: #a1f35e; border-radius: 2px; position: absolute; left: 0; bottom: 2px; z-index: -1;transition: all .15s;} .txtClmn p strong{font-weight: 500;} /*사진 오른쪽 정렬*/ .layoutRight{position: relative;} .layoutRight::after{content: ''; clear: both; display: block;} .layoutRight .imgClmn{float: right;} .layoutRight .txtClmn{left: 0;} .layoutRight .txtClmn div{float: left;} /*일반적인 글자+와이드사진*/ .ctsColumn .txtWide{} .ctsColumn .txtWide p{margin:30px 0 ;} .ctsColumn .txtWide p strong{font-weight: 500;} .ctsColumn .txtWide p em{display:inline-block;padding: 0 3px;position: relative;} .ctsColumn .txtWide p em:before{content:'';width: 100%; height: 12px; background: #a1f35e; border-radius: 2px; position: absolute; left: 0; bottom: 2px; z-index: -1;transition: all .15s;} .ctsColumn .txtWide div.btmTape{} .ctsColumn .txtWide div.btmTape span{display: block; text-align: center;} .img1Border{margin: 20px 0 0; border:1px solid #ccc; text-align: center;}/*이미지 테두리*/ .source{text-align: right;margin: 10px 0 0;/* font-size: .813em; */}/*출처*/ /*이미지 오른쪽하단 설명*/ .imgSrc{position: relative;} .imgSrc span{display: inline-block; padding: 2px 10px; margin:0 !important;; color: #fff; font-size: .813em; background: #000; position: absolute; right: 0; bottom: 0;} /*이미지 배열*/ .clmnImg{margin-top: 60px;} .clmnImg::after{content: ''; clear: both; display: block;} .clmnImg h5{display: inline-block !important;padding: 0 10px;margin: 0 30px !important;font-size: 1.167em !important;font-weight: 500; background:#fff;} .clmnImg h5:before{display:none} .clmnImg h5:after{display:none} .clmnImg div{margin-top: -15px; padding:20px; border:1px solid #c1c1c1;} .clmnImg div ul{margin-top: 12px;} .clmnImg div ul::after{content: ''; clear: both; display: block;} .clmnImg div li{float: left; height: auto; padding: 0 .5%;} .clmnImg div span{display: block; text-align: center;} .clmnImg .img2Type li{width: 50%;}/*이미지 2개일때 592px*/ .clmnImg div.img3Type li{ width: 33.3%;}/*이미지 3개일때 374px*/ .clmnImg div.img4Type li{ width: 25%;}/*이미지 4개일때 292px*/ /*이미지(사진) 설명글 bottom글자+background블랙*/ .btmTape{} .btmTape li{display: block; text-align: center; position: relative;} .btmTape span{position: relative;} .btmTape span:after{content: ''; width: 100%; height: 45px; background: #000; position: absolute; bottom:0; left: 0; opacity: .5} .btmTape em{display: block; width:100%; position: absolute; bottom: 7px; color: #fff !important; z-index: 5} /*편집자*/ .writing{text-align: right; } .writing span{display: inline-block; font-size: .889em; padding:4px 20px; border-radius: 50px; background: #efefef;} .writeType{} .writeType li{display: inline-block; width: 49.5%;} .writeType li::before{content: 'ㆍ'; display: inline-block;} /*컨텐츠 최하단 출처*/ .btmSource{margin-bottom: 20px;} .btmSource strong{display: block; margin-bottom: 7px; font-weight: 400;} .btmSource a{font-size: .778em;} .btmSource a:after{content: '바로가기'; display: inline-block; padding: 0px 7px; margin: -2px 0 0 5px; font-size: 12px; vertical-align:middle; border: 1px solid #ccc; border-radius: 3px;} /*동그라미+타이틀+다음줄텍스트*/ .stepNum{} .stepNum li{padding-bottom:15px; margin-bottom: 15px; border-bottom: 1px dashed #ccc;} .stepNum li:nth-last-child(1){border-bottom: 0;} .stepNum li strong{margin-right: 5px; font-weight: 400; position: relative;} .stepNum li strong::before{content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 6px; border-radius: 50px; } .stepNum li:nth-child(1) strong::before{background: #c492e7;} .stepNum li:nth-child(2) strong::before{background: #d882c3;} .stepNum li:nth-child(3) strong::before{background: #d36d78;} .stepNum li:nth-child(4) strong::before{background: #e8b5a4;} .stepNum li:nth-child(5) strong::before{background: #dca376;} .stepNum li p{} .stepNum li p em{display: block; padding: 7px 15px; margin-top:5px; font-size: .889em; border: 1px solid #ccc; background: #f5f5f5} /*조항 표기 등. 타이틀+텍스트*/ .titleList{} .titleList dl{margin: 10px;} .titleList dt strong{font-weight: 500;} .titleList dd{text-indent: -17px; padding-left: 17px;} .titleList dd.none{text-indent: 0; padding-left: 0;} /*테이블*/ .clmTable{} .clmTable h6{font-size: 1.0em;position: relative;padding: 0 23px 5px;font-weight: 500;} .clmTable h6:before{content: '';width: 18px;height: 18px;background: #000;position: absolute;left: 0;top: 5px;vertical-align: sub;border-radius: 50px;} .clmTable h6:after{content: '';position: absolute;left: 4px;height: 10px;width: 10px;top: 9px;border-radius: 50px;background: #fff;} /*.clmTable h6:before{content: '';width: 4px;height: 20px;background: #000;position: absolute;left: 0;top: 5px;vertical-align: sub;border-radius: 3px;} .clmTable h6:after{content: '';position: absolute;left: 0;height: 10px;width: 4px;top: 5px;border-radius: 3px;}*/ .clmTable table{width: 100%; border: 1px solid #e1e4d8; border-collapse: collapse; border-top:1px solid #454545} .clmTable thead th{background: #f5f5f5;text-align: center; font-weight: 400;} .clmTable th, .clmTable td{padding:7px 12px; border: 1px solid #ccc; vertical-align: middle; } .clmTable td{background: #fff; text-align: center} .clmTable td span{display: block} .clmTable tbody th{ color: #000; background: #eaf6ff; text-align: center;} .clmTable tfoot{border-top:2px solid #ccc} .clmTable tfoot th, .clmTable tfoot td{background:#fff; font-weight: bold; color: #000} .clmTable p{text-align: right;} .clmTable li{font-size: inherit !important;} @media all and (max-width:1199px){ /*문단구분*/ .ctsColumn{width: 100%; margin: 0 !important;} .layoutLeft .imgClmn{width: 100%;} .layoutLeft .imgClmn img{width: 100%; height: 300px; object-fit: cover; object-position:top left;} .layoutLeft .txtClmn{position: relative; top: inherit; float: left;} .layoutLeft .txtClmn div{float:inherit; width: 100%;} .txtClmn{width: 100%;} .stepNum li p, .txtClmn p, .ctsColumn header p, .ctsColumn .txtWide p{word-break:break-all;} .source{text-align: center;} .stepNum{margin-top: 20px;} .titleList dd{margin-top: 10px;} /*공통 테이블*/ .clmTable table{width:1001px;} .clmTable table.tbl_auto {table-layout: auto;} .clmTable{position: relative; margin: 40px 0 0} .clmTable::before{content: '좌우로 스크롤하여 확인하세요'; font-size: 13px; color:#676767; padding: 2px 0 2px 82px; background:url(/ps/img/cmmImg_2020/common/mb_scroll.png) left center no-repeat; position: absolute; top: 0; left: 50%; white-space: nowrap; transform:translateX(-50%);} .clmTable div{overflow-x: scroll; position: relative;} .expertCareer div:nth-last-child(1) li{width: 100%;} .farmBox li a .farm_tit{width:90%;} } @media all and (max-width:624px){ .expertCareer div li{text-indent: -8px; padding-left: 8px;} .writing{text-align: center; margin-bottom: 100px;} .clmnImg div li{width: 100% !important; margin: 5px 0;} .clmnImg div li img{width: 100%;} /*.txtWide .btmTape em{position: inherit; color:inherit !important; bottom: -7px; font-size: .778em;} .txtWide .btmTape span:after{display: none;}*/ .imgSrc span{width: 100%; position:inherit; text-align: center;} .ctsColumn .txtClmn p em, .ctsColumn .txtWide p em{display: inline; background: #a1f35e;} .ctsColumn .txtWide p em:before{display:none;} .colorType1 .txtClmn p em, .colorType1 .txtWide p em{background: #ffccf9 !important;} .colorType2 .txtClmn p em, .colorType2 .txtWide p em{background: #ffd4dc !important;} .colorType3 .txtClmn p em, .colorType3 .txtWide p em{background: #bcefff !important;} } @media all and (max-width:375px){ .ctsColumn header h4 span{font-size: 1.0em;} .ctsColumn header h4 strong{line-height:57px;} }