/************** LoTIS 2022 version **************/

/*** Layout ***/
/* 전체틀 */
.frTop, .frMiddle, .frBottom {width: 100%; height: auto;}
.frMiddle * {box-sizing: border-box;}

/* MOBILE MENU */
.mMenu {display: none;}

/*** TOP FRAME ***/
/* Top Menu */
.frTop .tnav {width: 100%; height: 64px; min-width: 900px; padding: 0 2.5%; box-sizing: border-box; position: fixed; text-align: center; border-bottom: 1px solid #999; background: rgba(295, 295, 295, 0.9); box-shadow: 0px 3px 10px 1px rgb(0, 0, 0, 0.1); z-index: 9999;}
.frTop .tnav:hover {border-bottom: 1px solid #4085D8;}
.frTop .tnav .topMenu {width:100%; max-width: 1350px; height: 100%; margin: 0 auto; display: inline-flex; align-items: center; justify-content: space-between;}
/* Left */
.frTop .tnav .topMenu .tmLeft {font-size: 1.3rem; font-weight: bold; display: flex; align-items: center; gap: 55px;}
.frTop .tnav .topMenu .tmLeft .menu {display: inline-block;}
.frTop .tnav .topMenu .tmLeft .menu a {margin-right: 55px; height: 64px; line-height: 64px; display: inline-block;}
.frTop .tnav .topMenu .tmLeft .menu a.news::after {content: url('../images/icon_news.png'); width: 14px; height: 14px; position: relative; top: -5px; left: 1px;}
.frTop .tnav .topMenu .tmLeft .menu a:hover,
.frTop .tnav .topMenu .tmLeft .menu a.selected {color: #4085D8; border-bottom: 2px solid #4085D8; box-sizing: border-box;}
.frTop .tnav .topMenu .tmLeft .mLogo {content: url('../images/lotis_logo.png'); width: 110px; height: auto;}
/* Right */
.frTop .tnav .topMenu .tmRight {display: flex; justify-content: right; align-items: center; gap: 15px; height: 100%; line-height: 100%;}
.frTop .tnav .topMenu .tmRight .btnSearch {width: auto; height: 20px; content: url('../images/icon_searchD.png'); display: none;}
.frTop .tnav .topMenu .tmRight .btnSearch:hover {width: auto; height: 20px; content: url('../images/icon_searchO.png');}
.frTop .tnav .topMenu .tmRight .login {width: auto; height: 20px; content: url('../images/icon_loginD.png');}
.frTop .tnav .topMenu .tmRight .login:hover {width: auto; height: 20px; content: url('../images/icon_loginO.png');}
.frTop .tnav .topMenu .tmRight .join {width: auto; height: 20px; content: url('../images/icon_joinD.png');}
.frTop .tnav .topMenu .tmRight .join:hover {width: auto; height: 20px; content: url('../images/icon_joinO.png');}
.frTop .tnav .topMenu .tmRight .member {width: auto; height: 30px; content: url('../images/icon_member.png');}
.frTop .tnav .topMenu .tmRight .btnLogout {width: auto; height: 30px; line-height: 30px; border: none; font-size: 0.9rem; font-weight: bold; color: #777; margin-left: -5px;}
.frTop .tnav .topMenu .tmRight .btnLogout:hover {color: #333;}

/* Top Menu : Mobile */
.frTop .tnav .topMenu .iconMmenu {content:url('../images/mobile_icon_menu.png'); display: none;}


/* 검색단 : 검색버튼 클릭 시 나타남 */
.search {width: 100%; min-width: 1000px; height: 280px; background:#fff; text-align: center; padding: 130px 0 10px; position: fixed; z-index: 1000; margin-top: 0; border-bottom: 1px solid #ccc; display: none;}
.search .searchWord {width: 700px; height: 70px; background: none; border: 4px solid #ccc; border-radius: 35px; padding: 0 45px 0 45px; font-size: 1.5rem; font-family:'NanumSquare'; font-weight: 700;}
.search .btnInptClose {position: absolute; margin-top: 30px; margin-left: -50px;}
.search .searchList {width: 800px; height: auto; max-height: 40px; margin: 30px auto;}
.search .searchList .keyword {display:inline-block; margin-right: 20px; font-size: 1.4rem; margin-top: 10px; color: #888; word-break: keep-all;}
.search .searchList .keyword:hover {color: #444; text-decoration: underline;}
.search .searchList .keyword:last-child {margin-right: 0;}
.search .btnclose {width: 40px; height: 40px; display: inline-block; background:url('../images/icon_delete.png') no-repeat center center; transition-duration:.2s; border: none; margin-top: 35px;}
.search .btnclose:hover {width: 80px; height: 80px; margin-top: 17px; background:url('../images/icon_deleteBbig.png') no-repeat center center #FAFAFA;}


/*** MIDDLE FRAME ***/
.frMiddle {width: 100%; font-size: 1rem;}
.frMiddle .title {line-height: 150%; font-weight: 700; letter-spacing: -0.05em; color: #333; margin: 0 auto; word-break: keep-all;}
.frMiddle .title.t01 {font-size: 3.0rem;}
.frMiddle .title.t02 {font-size: 2.8rem;}
.frMiddle .title.t03 {font-size: 2.3rem;}
.frMiddle .title.t04 {font-size: 2.0rem;}
.frMiddle .title.t05 {font-size: 1.8rem;}
.frMiddle .title.t06 {font-size: 1.5rem;} /* 로티스정책관련 */

/* SUB : frMdWrap */
.frMiddle .frMdWrap {width: 100%; max-width: 1100px; height: 100%; margin: 0 auto;}


/** MIDDLE FRAME : MAIN **/
/* 메인 슬라이드
.frMiddle .mSlide {width: 100%; height: auto; padding: 120px 0 100px; overflow: hidden;}
@keyframes gradient-bg {50% {background-position: bottom right;}}
.frMiddle .mSlide .title {width: 100%; max-width: 900px; height: auto; margin: 0 auto; text-align: center; color: #383838; font-weight: 100; word-break: keep-all;}
.frMiddle .mSlide .rollerWrap {position: relative; width: 100%; height: 400px; margin: 60px auto 0; box-sizing: border-box;}
.frMiddle .mSlide .rollerWrap .roller {position: absolute; width: auto; height: 100%; display: flex; flex-flow: row nowrap; align-items: center;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 500px; height: 400px; box-sizing: border-box; margin-right: 20px; transition-duration:.3s; font-size: 1rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt {width: 100%; height: 100%; position: relative; padding: 80px 80px; text-align: left; box-sizing: border-box; z-index: 1000; transition-duration:.5s; background: rgba(0, 0, 0, 0.5); border-radius: 10px;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .title {width: 100%; height: 4.5rem; line-height: 120%; overflow: hidden; font-size: 2em; text-align: left; color: #fff; font-weight: 700; padding: 0; text-overflow: ellipsis; -webkit-line-clamp: 2; display : -webkit-box; -webkit-box-orient : vertical; text-shadow: #000 1px 1px 5px;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .substance {width: 100%; height: 5.5rem; line-height: 120%; overflow: hidden; text-align: justify; font-size: 1.2em; font-weight: 300; margin-top: 30px; color: #fff; transition-duration:.4s; text-overflow: ellipsis; -webkit-line-clamp: 4; display : -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt {margin-top: 40px; font-size: 1.1em; line-height: 100%; letter-spacing: -0.04rem; display: flex; justify-content: space-between;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt .st1 {color:#D9D9D9;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt .st2 {color:#D9D9D9; display: none;}
.frMiddle .mSlide .rollerWrap .roller .contents .imgbg {width: 100%; height: 100%; position: relative; top: -100%; left: 0; background-repeat: no-repeat; z-index: 10; opacity: 1; border-radius: 10px;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover {height: 450px;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover .imgbg {opacity: 0.9;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover .contTxt {padding: 50px 80px; background: rgba(0, 0, 0, 0.7);}
.frMiddle .mSlide .rollerWrap .roller .contents:hover .substance {height: 11.5rem; -webkit-line-clamp: 8;}
.frMiddle .mSlide .linkNews {width: 100%; height: auto; text-align: center; margin-top: 60px;}
.frMiddle .mSlide .linkNews .btnMore {padding: 22px 45px; border-radius: 5px; font-size: 1.2rem; background: transparent;}
.frMiddle .mSlide .linkNews .btnMore:hover {color: rgb(75, 75, 75); padding: 22px 65px; background: #fafafa;}
*/
/* 메인 슬라이드 */
.frMiddle .mSlide {width: 100%; height: auto; padding: 120px 0 100px; overflow: hidden;}
.frMiddle .mSlide .title {width: 100%; max-width: 850px; height: auto; margin: 0 auto; text-align: center; color: #383838; font-weight: 100; word-break: keep-all;}
.frMiddle .mSlide .rollerWrap {position: relative; width: 100%; height: 420px; margin: 60px auto 0;}
.frMiddle .mSlide .rollerWrap .roller {position: absolute; width: auto; height: 100%; display: flex; flex-flow: row nowrap; align-items: center;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 420px; height: auto; padding-bottom: 10px; margin-right: 70px; transition-duration:.3s; font-size: 1rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .cntImg {width: 100%; height: 180px; border: 1px solid #eee; border-radius: 10px; transition-duration:.5s;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt {width: 100%; height: auto; position: relative; padding: 30px 0 0; text-align: left; z-index: 1000; transition-duration:.5s;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .title {width: 100%; height: 2rem; line-height: 120%; overflow: hidden; font-size: 1.7em; text-align: left; color: #222; font-weight: 700; padding: 0; text-overflow: ellipsis; -webkit-line-clamp: 1; display : -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .substance {width: 100%; height: 3.1rem; line-height: 150%; overflow: hidden; text-align: justify; font-size: 1.1em; margin-top: 40px; color: #222; transition-duration:.4s; text-overflow: ellipsis; -webkit-line-clamp: 2; display : -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt {margin-top: 20px; font-size: 1.0em; line-height: 100%; letter-spacing: -0.04rem; display: flex; justify-content: space-between; transition-duration:.3s;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt .st1 {color:#333; line-height: 28px;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt a.btn_more {width: 70px; height: 28px; line-height: 28px; text-align: center; font-size: 0.8em; background: transparent; border-radius: 30px; transition-duration:.3s;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt .st2 {color:#333; display: none;}
/*
.frMiddle .mSlide .rollerWrap .roller .contents .imgbg {width: 100%; height: 100%; position: relative; top: -100%; left: 0; background-repeat: no-repeat; z-index: 10; opacity: 1; border-radius: 10px;}
*/
.frMiddle .mSlide .rollerWrap .roller .contents:hover {height: auto;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover img {width: 100%; height: 200px;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover .substance {height: 8.3rem; -webkit-line-clamp: 5; margin-top: 20px;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover .subtxt a.btn_more {background: #1D1D1D; color: #DCDCDC;}
.frMiddle .mSlide .linkNews {width: 100%; height: auto; text-align: center; margin-top: 80px;}
.frMiddle .mSlide .linkNews .btnMore {padding: 22px 45px; border-radius: 5px; font-size: 1.2rem; background: transparent;}
.frMiddle .mSlide .linkNews .btnMore:hover {color: rgb(75, 75, 75); padding: 22px 65px; background: #fafafa;}

/* 애니메이션 */
.roller.original{
  animation: 80s linear 0s infinite normal forwards running rollingleft1;
}
.roller.clone{
  animation: 80s linear 0s infinite normal none running rollingleft2;
}
@keyframes rollingleft1 { /* 원본용 */
  0% {
      transform: translateX(0);
  }
  50% {
      transform: translateX(-100%);
  }
  50.01%{
      transform: translateX(100%);
  }
  100%{
      transform: translateX(0);
  }
}

@keyframes rollingleft2 { /* 클론용 */
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-200%);
  }
}


/* 메인 이미지 */
.main_img {margin-top: 50px;}

/* 카테고리 메뉴 */
.frMiddle .category {width: 100%; height: auto; padding: 100px 5%; box-sizing: border-box; background: #FAFAFA; text-align: center;}
.frMiddle .category .ctMenuWrap {width: 100%; max-width: 1400px; height: auto; display: inline-flex; justify-content: flex-start; text-align: center; margin-top: 60px; flex-wrap: wrap;}
.frMiddle .category .ctMenuWrap .ctMenu {width: auto; height: auto; display: inline-flex; justify-content: flex-start; flex-direction: column; align-items: center; gap: 12px; cursor: pointer;}
.frMiddle .category .ctMenuWrap .ctMenu button {width: 115px; height: 115px; background-color: #fff; background-repeat: no-repeat; background-position: center center; border-radius: 34px; border: 3px solid #EBEBEB; cursor: pointer;}
.frMiddle .category .ctMenuWrap .ctMenu:hover {color: #000;}
.frMiddle .category .ctMenuWrap .ctMenu:hover button {border-color: #bbbbbb;}
.frMiddle .category .ctMenuWrap .ctMenu button:active,
.frMiddle .category .ctMenuWrap .ctMenu.selected button {border-color: #0085FF;}
.frMiddle .category .ctMenuWrap .ctMenu.selected {color: #000;}
.frMiddle .category .ctMenuWrap .ctMenu span {width: 100%; height: auto; display: block; font-size: 1.2rem; line-height: 100%;}
.frMiddle .category .ctMenuTypeWrap {width: 100%; max-width: 1400px; height: auto; display: inline-flex; justify-content: space-between; text-align: center; margin-top: 60px;}
.frMiddle .category .ctMenuTypeWrap .ctMenu {width: auto; height: auto; display: inline-flex; justify-content: flex-start; flex-direction: column; align-items: center; gap: 12px; cursor: pointer;}
.frMiddle .category .ctMenuTypeWrap .ctMenu button {width: auto; height: 60px; padding: 0 20px; background-color: #fff; background-repeat: no-repeat; background-position: center center; border-radius: 34px; border: 3px solid #EBEBEB; cursor: pointer; font-family: inherit; font-size: 16px;}
.frMiddle .category .ctMenuTypeWrap .ctMenu:hover {color: #000;}
.frMiddle .category .ctMenuTypeWrap .ctMenu:hover button {border-color: #bbbbbb;}
.frMiddle .category .ctMenuTypeWrap .ctMenu button:active,
.frMiddle .category .ctMenuTypeWrap .ctMenu.selected button {border-color: #0085FF;}
.frMiddle .category .ctMenuTypeWrap .ctMenu.selected {color: #000;}
.frMiddle .category .ctMenuTypeWrap .ctMenu span {display: none;}
/* 카테고리 메뉴 : 키워드 */
.frMiddle .category .hotKeyword {width: 100%; max-width: 1400px; height: auto; max-height: 250px; text-align: left; margin: 60px auto 0; overflow: hidden; box-sizing: border-box; display: block; font-size: 0;}
.frMiddle .category .hotKeyword .title {display: block; margin-bottom: 20px; margin-left: 10px;}
.frMiddle .category .hotKeyword .keyword {width: auto; height: auto; display: inline-block; padding: 9px 15px; margin: 0 5px 8px 0; font-size: 1.2rem; line-height: 100%; color: #444; border: 2px solid #EBEBEB; border-radius: 30px; background: #fff;}
.frMiddle .category .hotKeyword .keyword:hover {border-color: #bbbbbb;}
.frMiddle .category .hotKeyword .keyword:active {border-color: #0085FF;}

/* 펼쳐진 컨텐츠 */
.frMiddle .frMdWrapMain {width: 100%; padding: 100px 1.5%; box-sizing: border-box; text-align: center;}
.frMiddle .frMdWrapMain .contContainer {width: 100%; height: auto; display: inline-flex; flex-direction: row; justify-content: space-between; padding-bottom: 80px; overflow: hidden; margin-top: 80px;}
.frMiddle .frMdWrapMain .contContainer .contents {width: 60%; height: 400px; min-width: 1100px; border: 1px solid #777; margin-right: 10px; overflow: hidden; background:#fff; cursor: initial; display: flex; justify-content: space-between; transition-duration:.3s;}
.frMiddle .frMdWrapMain .contContainer .contents:last-of-type {margin-right: 0;}
.frMiddle .frMdWrapMain .contContainer .contents img {width: 60%; height: 100%; padding: 15px 15px; box-sizing: border-box; object-fit: cover;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt {width: 40%; height: 100%; display: flex; flex-direction: column; justify-content: left; padding: 30px 30px 30px 15px; box-sizing: border-box; text-align: left; font-size: 1rem;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtitle {height: 2rem; line-height: 130%; overflow:hidden; font-size: 1.8em; font-weight: 700; color: #333; text-overflow: ellipsis; -webkit-line-clamp: 1; display : -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .substance {height: 7.1rem; overflow: hidden; text-align: justify; font-size: 1.1em; margin-top: 30px; color: #777; text-overflow: ellipsis; -webkit-line-clamp: 5; display: -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtxt {width: 100%; margin-top: 40px; font-size: 1.1em; font-weight: 700; line-height: 100%; letter-spacing: -0.04rem; display: flex; justify-content: space-between; align-items: center;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtxt .st1 {color:#b3b7bc;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtxt .st2 {color:#2A8BD2;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap {margin-top: 80px; text-align: right;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap a {width: auto; height: auto; background-size: contain; background-repeat: no-repeat; background-position: left center; text-align: right; font-size: 1.0em; color:#888;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnSave {background: url('../images/icon_save2D.png') no-repeat left center transparent; background-size: 23%; margin-right: 15px; padding-left: 28px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnView {background: url('../images/icon_view.png') no-repeat left center transparent; background-size: 19%; padding-left: 22px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnSave:hover,
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnView:hover {color:#555; text-decoration: underline;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnSave.completed {background-image: url('../images/icon_save2_completed.png'); color:#cecece;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnSave.completed:hover {text-decoration: none;}
/* 접혀진 컨텐츠 : fold 적용 */
.frMiddle .frMdWrapMain .contContainer .contents.fold {width:12.5%; min-width: 150px; border: 0px solid #fff; color:#DCDCDC; text-align: center; cursor: pointer;}
.frMiddle .frMdWrapMain .contContainer .contents.fold img {display: none;}
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt {width: 100%; height: 100%; padding: 0 20px; box-sizing: border-box; z-index: 10; position: relative; text-align: center; background: rgba(0, 0, 0, 0.6); transition-duration:.3s;}
.frMiddle .frMdWrapMain .contContainer .contents.fold:hover .contTxt {background: rgba(0, 0, 0, 0.7);}
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt .subtitle {width:100%; height: 3.1rem; line-height: 130%; overflow: hidden; font-size: 1.3em; font-weight: 300; color: #eee; margin-top: 160px; position: relative; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;}
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt .substance,
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt .subtxt .st1,
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt .bttnWrap {display: none;}
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt .subtxt {width: 100%; font-weight: 300; margin-top: 20px; justify-content: center;}
.frMiddle .frMdWrapMain .contContainer .contents.fold .contTxt .subtxt .st2 {color: #eee; text-align: center;}
/* 페이징 넘버 : 가로 1350px 이하 fold 없을 때 사용 */
.frMiddle .frMdWrapMain .pagingBtnWrap {width: auto; height: auto; margin: 0 auto;}
.frMiddle .frMdWrapMain .pagingBtnWrap button {display: none;}

/* MAIN_BOTTOM_이전읽은글, 담아둔글 */
.frMiddle .mainBottom {width: 100%; height: auto;}
.frMiddle .mainBottom .storage {width: 100%; height: auto; background-color:#262626;}
.frMiddle .mainBottom .storage .storageWrap {width:100%; max-width: 1350px; height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] {width: 100%; height: auto; padding: 40px 0 30px 15%; box-sizing: border-box;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .title {font-size: 1.6rem; line-height: 100%; font-weight: 300; color: #DCDCDC;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .subtitle {font-size: 1.3rem; line-height: 150%; color: #999;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] a {display: inline-block; font-size: 2rem; font-weight: 300; line-height: 100%; color:rgb(175, 175, 175); margin: -18px 10% 0 0; float: right;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc']:hover a {color:#fff;}
.frMiddle .mainBottom .storage .storageWrap .atcRead {background:url('../images/icon_book.png') no-repeat 80px center; background-size: 8%; border-right: 1px solid #666;}
.frMiddle .mainBottom .storage .storageWrap .atcSave {background:url('../images/icon_book2.png') no-repeat 80px center; background-size: 8%;}

/* MAIN_BOTTOM_관계기관 */
.frMiddle .mainBottom .cooperation {width: 100%; height: auto; padding: 50px 2.5%; box-sizing: border-box;}
.frMiddle .mainBottom .cooperation .cooperationList {width: 100%; max-width: 1350px; height: auto; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.frMiddle .mainBottom .cooperation .cooperationList img {width: 170px;}


/** NEWS **/
.frMiddle .NewsWrap {width: 100%; height: auto;}
/* NEWS_카테고리 메뉴 */
.frMiddle .NewsWrap.NewsSort {width: 100%; height: auto; padding: 120px 0 30px; box-sizing: border-box; background: transparent; text-align: left;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap {width: 100%; max-width: 1100px; height: auto; display: inline-flex; justify-content: flex-start; text-align: center; margin-top: 10px; flex-wrap: wrap;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu {width: 10%; height: auto; display: inline-flex; justify-content: flex-start; flex-direction: column; align-items: center; gap: 8px; padding: 10px;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu button {width: 95px; height: 95px; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 70%; border-radius: 26px; border: 3px solid #EBEBEB; cursor: pointer;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu button:hover {border-color: #bbbbbb;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu button:active,
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu.selected button {border-color: #0085FF;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu span {width: 100%; height: auto; display: block; font-size: 0.9rem; line-height: 100%;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap {width: 100%; max-width: 1100px; height: auto; display: inline-flex; justify-content: space-between; text-align: center; margin-top: 20px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu {width: auto; height: auto; display: inline-flex; justify-content: flex-start; flex-direction: column; align-items: center; gap: 8px; padding: 10px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu button {width: auto; height: 40px; padding: 0 20px; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 70%; border-radius: 26px; border: 3px solid #EBEBEB; cursor: pointer; font-family: inherit; font-size: 1rem;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu button:hover {border-color: #bbbbbb;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu button:active,
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu.selected button {border-color: #0085FF;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu span {display: none;}
/* NEWS_카테고리 메뉴 : 키워드 */
.frMiddle .NewsWrap.NewsSort .hotKeyword {width: 100%; max-width: 1100px; height: 93px; text-align: left; margin: 20px auto 0; overflow: hidden; box-sizing: border-box; display: block; font-size: 0;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .title {margin-bottom: 13px;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword {width: auto; height: auto; display: inline-block; padding: 8px 14px; margin: 0 5px 8px 0; font-size: 1rem; line-height: 100%; color: #444; border: 2px solid #EBEBEB; border-radius: 30px; background: #fff;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword:hover {border-color: #bbbbbb;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword.selected,
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword:active {border-color: #0085FF;}
/* NEWS_검색어 입력, 추가 조건 선택 */
.frMiddle .NewsWrap.news .serachwrap {width: 100%; height: auto; padding-bottom: 50px; display: flex; justify-content: space-between; align-items: center; gap: 30px;}
.frMiddle .NewsWrap.news .serachwrap .searchbar {width: 60%; min-width: 200px; height: auto; border: 1px solid #989898; border-radius: 10px; padding: 8px 10px; box-sizing: border-box; background: #ffffff;}
.frMiddle .NewsWrap.news .serachwrap .searchbar input {width: calc(100% - 30px); height: auto; padding-left: 10px; box-sizing: border-box; font-size: 1.0rem; font-weight: 700; color: #555; border: none;}
.frMiddle .NewsWrap.news .serachwrap .searchbar input::placeholder {color: #c5c5c5;}
.frMiddle .NewsWrap.news .serachwrap .searchbar .btnSearch {width:19px; height: 19px; background: url('../images/icon_search.png') no-repeat center center; border: none; position: relative; top: 3px; display: inline-block;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti {width: 40%; min-width: 400px; display: flex; justify-content: right; gap: 25px; align-items: center;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label {display: flex; align-items: bottom; gap: 8px; font-size: 1rem; color: #222;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label input[type="checkbox"] {width: 20px; height: 20px; border: 2px solid #C8C8C8; border-radius: 3px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti select {width: auto; padding: 7px 30px 7px 15px; border: 1px solid #989898; border-radius: 5px; appearance:none; background:url('../images/selectArrow.png') no-repeat 90% 50%/13px auto #ffffff; font-size: 0.8rem; color: #222; font-weight: 700;}
/* NEWS_리스트 */
.frMiddle .NewsWrap.news {width: 100%; text-align: center; padding: 50px 0 100px; background-color: #F9F9F9;}
.frMiddle .NewsWrap.news .contentsWrap {width: auto; display: flex; justify-content: space-between; text-align: left; font-size: 1rem;}
.frMiddle .NewsWrap.news .contentsWrap .ico_loading {width: 100px; height: 100px; display: inline-block; margin: 50px auto; padding: 50px 0; background: url('../images/ic_loading.gif') no-repeat center center; background-size: contain;}
.frMiddle .NewsWrap.news .contentsWrap .contents {width: 30%; height: auto; border: none; padding: 0; display: inline-block; margin-bottom: 100px;}
.frMiddle .NewsWrap.news .contentsWrap .contents img {width: 100%; height: 200px; object-fit: cover;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt {width: 100%; margin-top: 10px auto; text-align: left;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt .title {width: 100%; height: 1.6rem; line-height: 130%; overflow: hidden; font-size: 1.3em; font-weight: 700; margin-top: 20px; color: #333; text-overflow: ellipsis; -webkit-line-clamp: 1; display : -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt .title:hover {text-decoration: underline;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt .substance {width: 100%; height: 4.1rem; line-height: 130%; overflow: hidden; text-align: justify; font-size: 1.1em; margin-top: 20px; color: #777; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .NewsWrap.news .contentsWrap .contents .subtxt {width: 100%; height: 40px; margin-top: 20px; font-size: 1.1em; line-height: 100%; letter-spacing: -0.04rem; display: flex; justify-content: space-between; align-items: center; color:#777;}
.frMiddle .NewsWrap.news .contentsWrap .contents .subtxt .st2 {color:#2A8BD2; margin-left: 15px;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave {width: 40px; height: 40px; display: inline-block; background:url('../images/icon_save2D.png') no-repeat center center; position: relative; top: -3px;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave:hover {box-shadow: 0px 0px 2px #555; border-radius: 50%;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave.completed {background:url('../images/icon_save2_completed.png') no-repeat center center;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave.completed:hover {box-shadow: 0px 0px 2px #555;}
.frMiddle .NewsWrap.news .btnMore {margin-top: 0; padding: 18px 60px; font-size: 1.2em;}
.frMiddle .NewsWrap.news .btnLoading {width: 30px; height: 30px; display: inline-block; background: url('../images/ic_loading.gif') no-repeat center center; background-size: contain; cursor: unset;}


/** VIEW **/
.frMiddle .frMdWrap.SubAtc {width: 100%; padding: 120px 0 50px; position: relative; margin: 0 auto; word-break: break-all; text-align: center;}
.frMiddle .frMdWrap.SubAtc .contView {width: 100%; font-size: 1rem; text-align: left;}
.frMiddle .frMdWrap.SubAtc #goList {margin-top: 50px;}
/* 매인타이틀, 작성자, 게시일 등 */
.frMiddle .frMdWrap.SubAtc .contView .title {margin-bottom: 15px;}
.frMiddle .frMdWrap.SubAtc .contView .titleWrap .subtxt {font-size: 1.2em; font-weight: 400; letter-spacing: -0.01em; line-height: 150%; display: inline-block;}
.frMiddle .frMdWrap.SubAtc .contView .titleWrap .subtxt::after {content: ','; margin-right: 8px;}
.frMiddle .frMdWrap.SubAtc .contView .titleWrap .subtxt:last-of-type:after {content:none; margin-right: 0;}
.frMiddle .frMdWrap.SubAtc .contView .titleWrap .title.t04 {color: #777; margin-top: 50px;}
/* 본문글 */
/* 중복요소 */
.frMiddle .frMdWrap.SubAtc .contView .stitle {font-weight: 400; color: #444; margin-top: 100px;}
.frMiddle .frMdWrap.SubAtc .contView p {width: 100%;}
.frMiddle .frMdWrap.SubAtc .contView .content {font-weight: 400; letter-spacing: 0; color:#888; line-height: 180%; padding: 25px 0; text-align: justify; font-size: 1.2em;}
/* 이미지 */
.frMiddle .frMdWrap.SubAtc .contView img {max-width: 100%; margin-top: 60px;}
.frMiddle .frMdWrap.SubAtc .contView .imgTitle {margin-top: 15px; text-align: center; font-size: 0.9em; line-height: 100%;}
.frMiddle .frMdWrap.SubAtc .contView .imgOrigin {margin: 10px 0 60px; text-align: center; font-size: 0.9em; line-height: 100%;}
.frMiddle .frMdWrap.SubAtc .contView .imgOrigin::before {content: '(';}
.frMiddle .frMdWrap.SubAtc .contView .imgOrigin::after {content: ')';}
/* 기타
.frMiddle .frMdWrap.SubAtc .contView .articleInfo {text-align: left; font-size: 1em; margin-top: 100px;}
.frMiddle .frMdWrap.SubAtc .contView .articleInfo span {margin-right: 15px; color: #555; display: inline-block; line-height: 100%;}
*/
.frMiddle .frMdWrap.SubAtc .contView .warning {width: 100%; padding: 20px 30px; box-sizing: border-box; border: 1px solid #ec2121; text-align: center; font-size: 1.1em; font-weight: 400; letter-spacing: -0.01em; line-height: 200%; color: #333; margin-top: 100px;}
/* VIEW_Table */
.frMiddle .frMdWrap.SubAtc .contView .tableGuide {width:100%; text-align: center; font-size: 1rem; margin-top: 60px;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap {max-width: 100%; width: auto; display: inline-block;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableNote {position: relative; top: 0; right: 0; display: block; text-align: right; padding: 8px 0; font-size: 0.9em;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout {width: 100%; overflow: auto; white-space: nowrap;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table {width: 100%; height: auto; padding: 0; margin: auto; border: 1px solid #ccc; border-bottom: none; border-spacing: 0; text-align: center;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table caption {padding: 8px; caption-side: bottom; text-align: center; display: none;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table caption .tableTitle {text-align: center; line-height: 100%; margin-top: 10px;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table th {border-left: none; border-top: none; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 10px; margin: 0;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table td {border-left: none; border-top: none; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 10px; margin: 0;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout  table th:last-child {border-right: none;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout  table td:last-child {border-right: none;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tableCaption {width: 100%; margin: 0 auto; text-align: center;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tableCaption .tableTitle {line-height: 100%; margin-top: 15px; font-size: 0.9em;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tableCaption .tableSource {line-height: 100%; margin-top: 10px; font-size: 0.9em;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tableCaption .tableSource::before {content: '(';}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tableCaption .tableSource::after {content: ')';}

/* VIEW_Bottom */
.frMiddle .frMdWrap.SubAtc .contView .articleBoard {width: 100%; border-top: 2px solid #666; border-bottom: 2px solid #666; padding: 0; margin-top: 100px; border-spacing: 0;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard .atcBrdTitle {width: 20%; min-width: 60px; font-size: 1em; font-weight: 700; color: #4E4E4E;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard tr td {border-bottom: 1px solid #DCDCDC; padding: 15px 0; font-size: 1em;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard tr:last-child td {border-bottom: none;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a {display: inline-block; padding-right: 30px; line-height: 150%;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a:hover {color: #2A8BD2;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a::after {content:'|'; padding-left: 30px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a:last-child:after {content: none;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter {width: 100%; height: auto; border-top: 0px solid #666;  border-bottom: 2px solid #666; margin-top: 10px; table-layout: fixed;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter {width: 100%; color: #777;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .atcBrdTitle {width: 20%; font-size: 1em; font-weight: 700; color: #4E4E4E;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter tr td {padding: 5px 0;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter tr:last-child td {border-bottom: none;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .sortWrap {padding: 0; margin: 0;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .sortWrap .btnSort {padding: 5px 5px; border: none; background: transparent; font-size: 0.9em;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .sortWrap .btnSort.on {color: #4085D8; font-weight: bold;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap {width: 100%; overflow: auto; white-space: nowrap; -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc {width: 217px; height: auto; border: 1px solid #b3b7bc; border-radius: 4px; padding: 10px 15px; margin-bottom: 5px; display: inline-block; box-sizing: border-box;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc.selected {border: 1px solid #222; background: url('../images/ic_now.png') no-repeat 95% 90%;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc span {width: 100%; font-size: 0.9em; line-height: 150%; color: #888; display: block;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc span[class^='title'] {font-size: 1em; margin-bottom: 10px; color: #555; font-weight: 700; height: 47px; overflow: hidden; white-space: normal;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .arrowWrap {float: right;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter button[class^='btnGoPrev'] {width: 11px; height: 11px; border:none; background: url('../images/btn_goPrev.png') no-repeat center center; margin-right: 4px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter button[class^='btnGoNext'] {width: 11px; height: 11px; border: none; background: url('../images/btn_goNext.png') no-repeat center center;}


/** TREND **/
.frMiddle .trendWrap {width: 100%; height: auto;}
.frMiddle .trendWrap .frMdWrap.trendMenu {margin-bottom: 50px;}
.frMiddle .trendWrap .frMdWrap.trendMenu .title {padding-top: 120px; margin-bottom: 30px;}
/* TREND_메뉴 */
.frMiddle .trendWrap .frMdWrap.trendMenu .btnMore {border-radius: 50px; margin-right: 5px;}
.frMiddle .trendWrap .frMdWrap.trendYear {margin: 0 auto; text-align: right;}
.frMiddle .trendWrap .frMdWrap.trendYear select {font-size: 1rem; font-weight: 700; padding: 5px 20px 5px 10px; border: 1px solid #555; border-radius: 3px; appearance: none; background:url('../images/selectArrowTrend.png') no-repeat 90% 53%/9px auto;}
/* TREND_그래프 */
.frMiddle .trendWrap .frMdWrap.trendGraph .graph {width: auto; height: 100%; padding: 20px 20px; border: 1px solid #555; margin: 10px 0 30px 0;}
/* TREND_게시판 */
.frMiddle .trendWrap .frMdWrap.trendBoard {display: flex; justify-content: space-between; margin: 10px auto 50px;}
.frMiddle .trendWrap .frMdWrap.trendBoard .trdbrdWrap {width: 50%; height: auto; padding: 30px 30px; margin-right: 10px; border: 1px solid #555; box-sizing: border-box;}
.frMiddle .trendWrap .frMdWrap.trendBoard .trdbrdWrap:last-of-type {margin-right: 0;}
.frMiddle .trendWrap .frMdWrap.trendBoard .title {font-size: 1.2rem; font-weight: 700; line-height: 130%; color: #555; text-align: left;}
.frMiddle .trendWrap .frMdWrap.trendBoard table {width: 100%; border-top: 2px solid #666; padding: 0; color: #777; border-spacing: 0; margin-top: 12px;}
.frMiddle .trendWrap .frMdWrap.trendBoard table tr td {border-bottom: 1px solid #DCDCDC; padding: 15px 0; font-size: 1.1rem; line-height: 120%;}
.frMiddle .trendWrap .frMdWrap.trendBoard table tr:last-child td {border-bottom: none; padding: 15px 0 0;}
.frMiddle .trendWrap .frMdWrap.trendBoard table .num {width: 35px;}


/** BOARD **/
.frMiddle .boardWrap {width: 100%; height: auto;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap .title {padding-top: 120px; margin-bottom: 30px;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table {width: 100%; padding: 10px 0; border-top: 2px solid #333; border-bottom: 2px solid #333; margin-top: 0; border-spacing: 0; font-size: 1rem;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table thead tr th {padding: 10px 0; border-bottom: 1px solid #555; font-size: 1.2em;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td {padding: 13px 0; border-bottom: 1px solid #f0f0f0; font-size: 1.1em; font-weight: 400;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td img {width: 70px; height: 90px; object-fit: cover; border: 1px solid #eee; background-color: #fff;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td:first-child {padding-right: 20px;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td.date {color: #888C97; min-width: 80px;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td.hits {color: #888C97; min-width: 60px;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td:last-child {padding-left: 10px;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr:last-child td {border-bottom: none;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td a:hover {color: #000;}
.frMiddle .boardWrap .pagingBtnWrap {padding: 30px 0 50px;}
.frMiddle .boardWrap .pagingBtnWrap button {margin: 0 5px;}

/** BOARD : Thumbnail **/
.frMiddle .boardWrap.thumbnail .frMdWrap.brdtblWrap table tr td:nth-child(2) {padding-right: 20px;}

/** BOARD VIEW **/
.frMiddle .boardViewWrap {padding: 120px 0 50px; text-align: center;}
.frMiddle .boardViewWrap .frMdWrap {text-align: left;}
.frMiddle .boardViewWrap .frMdWrap .title {margin-bottom: 15px;}
.frMiddle .boardViewWrap .frMdWrap .date {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.06rem; color: #888; line-height: 150%;}
.frMiddle .boardViewWrap .frMdWrap .article {width: 100%; height: auto; border-top: 1px solid #b3b7bc; border-bottom: 1px solid #b3b7bc; margin: 30px 0 0; padding: 40px 0; font-size: 1.2rem; line-height: 150%; color: #555;}
.frMiddle .boardViewWrap .frMdWrap .article img {max-width: 100%; height: auto;}
.frMiddle .boardViewWrap .frMdWrap .article .subtitle::before {content: '○'; font-size: 0.6em; position: relative; top: -2px; margin-right: 10px;}
.frMiddle .boardViewWrap .frMdWrap .article .subTxt {text-indent: 1rem;}
.frMiddle .boardViewWrap .frMdWrap .article a {border-bottom: 1px solid #999;}
.frMiddle .boardViewWrap .frMdWrap .article a:hover {color: #4085D8; border-color: #4085D8;}
.frMiddle .boardViewWrap button {margin: 50px auto 0;}

/** BOARD VIEW : File Download **/
.frMiddle .boardViewWrap .filedownload {width: 100%; height: auto; padding: 20px 0; /*display: none;*/ /*첨부파일없을경우*/}
.frMiddle .boardViewWrap .filedownload .fileWrap {display: flex; justify-content: left; align-items: center; border-bottom: 1px solid #eeeeee; height: auto; margin-bottom: 20px; padding-bottom: 10px;}
.frMiddle .boardViewWrap .filedownload .fileWrap .filename {font-size: 1.1rem; color: #777; min-width: 90px;}
.frMiddle .boardViewWrap .filedownload .fileWrap a {font-size: 1.1rem; font-weight: bold; color: #777; line-height: 130%;}
.frMiddle .boardViewWrap .filedownload .fileWrap a:hover {color: #222;}

/** BOARD VIEW : Comment **/
.frMiddle .boardViewWrap .comment {width: 100%; height: auto; border: 1px solid #999; margin-top: 50px;}
.frMiddle .boardViewWrap .comment .commentWrite {width: 100%; height: fit-content; padding: 30px 30px; font-size: 1.0rem; display: flex; flex-direction: column; align-items: start;}
.frMiddle .boardViewWrap .comment .commentWrite .title {font-size: 1.2em; font-weight: bold; display: inline-block; margin: 0 0 20px 0;}
.frMiddle .boardViewWrap .comment .commentWrite div {display: inline-block; margin: 0 20px 10px 0;}
.frMiddle .boardViewWrap .comment .commentWrite .stitle,
.frMiddle .boardViewWrap .comment .commentWrite .stitle2 {width: auto; height: 28px; line-height: 28px; display: inline-block; margin-right: 5px;}
.frMiddle .boardViewWrap .comment .commentWrite input {width: 160px; height: 28px; padding: 5px; margin-right: 10px; font-size: 0.9em;}
.frMiddle .boardViewWrap .comment .commentWrite input::placeholder {color: #bbb;}
.frMiddle .boardViewWrap .comment .commentWrite select {width: auto; height: 28px; padding: 0 5px; border-color: #ccc; font-size: 0.8em; color: #555;}
.frMiddle .boardViewWrap .comment .commentWrite input:focus,
.frMiddle .boardViewWrap .comment .commentWrite select:focus {border-color: #222;}
.frMiddle .boardViewWrap .comment .commentWrite .btn_register {width: fit-content; height: 28px; font-size: 0.8em; background: #555; color: #DCDCDC; border-radius: 4px; border: 0px solid #ccc; padding: 5px 12px; margin: 0; position: relative; top: -2px;}

.frMiddle .boardViewWrap .comment .commentList {width: calc(100% - 60px); height: auto; padding: 30px 0; margin: 0 auto; border-top: 1px solid #eeeeee; /* display: none;*//* 댓글 없을 경우 */}
.frMiddle .boardViewWrap .comment .commentList .cListInner {width: 100%; height: auto; display: flex; justify-content: start; align-items: center; gap: 20px; box-sizing: border-box; font-size: 1rem;}
.frMiddle .boardViewWrap .comment .commentList .cListInner .name {font-weight: bold; width: auto; min-width: 50px; height: auto; display: inline-block; overflow: hidden;}
.frMiddle .boardViewWrap .comment .commentList .cListInner .btn_delete {font-size: 0.8em; background: #fff; color: #888; border: none; margin: 0;}
.frMiddle .boardViewWrap .comment .commentList .cListInner .btn_delete:hover {text-decoration: underline;}



/** MY PAGE **/
.frMiddle .MypageWrap {padding: 120px 0 100px;}
.frMiddle .MypageWrap .frMdWrap .mypageBody {width: 100%; height: auto; margin: 50px auto 0;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel {width: 100%; height: auto; min-height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 60px 0; border-bottom: 1px solid #eee; font-size: 1.5rem; line-height: 100%;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel:last-of-type {border: none;}
/* input, select */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .labelWrap label {font-size: 0.8em; color: #888; display: inline-block; margin-right: 20px;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .labelWrap input {font-size: 0.8em; color: #888; display: inline-block;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel input[type='checkbox'] {width: 18px; height: 18px; position: relative; top: 2px; margin: 0 10px 10px 0;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel input[type='radio'] {width: 18px; height: 18px; position: relative; top: 2px; margin: 10px 2px 0 0;}
/* button */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap {height: 40px; display: flex; align-items: center;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap button {width: auto; min-width: 50px; height: auto; padding: 10px 10px; border: 1px solid #ccc; border-radius: 5px; background: rgb(245, 245, 245); font-size: 0.6em; margin-left: 5px;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap button:nth-of-type(1),
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap button:nth-of-type(2) {margin-left: 0;}

/* MY PAGE_메뉴 */
.frMiddle .MypageWrap .mypageMenu {width: 100%; height: auto; display: block; font-size: 1.2rem; letter-spacing: -0.06rem; text-align: right;}
.frMiddle .MypageWrap .mypageMenu a,
.frMiddle .MypageWrap .mypageMenu span {margin-right: 5px; display: inline-block;}
.frMiddle .MypageWrap .mypageMenu a.selected {font-weight: 700;}

/* MY PAGE_회원정보 */
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap {display: flex; justify-content: left; align-items: center;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle {width: 160px; height: auto; display: inline-block;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle.subscribe {min-width: 240px; margin-right: 20px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle .cr1 {position: relative; top: 3px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap div {display: flex; justify-content: left; align-items: center;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap input[type='text'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap input[type='password']{width: 300px; height: 46px; display: inline-block; font-size: 0.8em; color: #888; padding: 0 50px 0 10px; box-sizing: border-box;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap div input:focus {border: 1px solid #555;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap div input:disabled {border: 1px solid #fff; background: transparent;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .description {font-size: 0.7em; color:#b3b7bc; display: inline-block; margin-left: 10px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .mailAgrr {height: auto; min-height: 40px; line-height: 40px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap select {width: 300px; height: 46px; display: inline-block; font-size: 0.8em; color: #888; padding: 0 10px; box-sizing: border-box; border: 1px solid #ccc; appearance:none; background:url('../images/selectArrow.png') no-repeat 97% 50%/15px auto #fff;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap select:disabled {border: 1px solid #fff; background: transparent; color: #4E4E4E;}

/* MY PAGE_관심정보 */
.frMiddle .MypageWrap .frMdWrap.memberInterest .dscrInterest {font-size: 1.3rem; color:#999; display: block; line-height: 130%; margin-top: 5px;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel {width: 100%; height: auto; display: flex; justify-content: space-between; align-items: flex-start; padding: 60px 0;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .subtitle {margin-bottom: 15px;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .labelWrap {width: 80%; height: auto; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .interestList span {font-size: 0.8em; line-height: 100%; margin-right: 5px; color:#949494;}

/* MY PAGE_이전 읽은 글/담아둔 글 */
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap {width: 100%; display: flex; justify-content: space-between; font-size: 1rem;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents {width: 30%; height: auto; border: none; padding: 0; display: inline-block; margin-bottom: 100px;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents img {width: 100%; height: 200px; object-fit: cover;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt {width: 100%; margin-top: 10px auto; text-align: left;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt .title {width: 100%; height: 1.5rem; line-height: 130%; overflow: hidden; font-size: 1.3em; font-weight: 700; margin-top: 20px; color: #333; text-overflow: ellipsis; -webkit-line-clamp: 1; display : -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt .title:hover {text-decoration: underline;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt .substance {width: 100%; height: 68px; line-height: 130%; overflow: hidden; text-align: justify; font-size: 1.1em; margin-top: 20px; color: #777; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient : vertical;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .subtxt {margin-top: 20px; font-size: 1.1em; line-height: 100%; letter-spacing: -0.04rem; display: flex; justify-content: space-between; align-items: center; color:#777;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .subtxt .st2 {color:#2A8BD2; margin-left: 15px;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave {width: 40px; height: 40px; display: inline-block; background:url('../images/icon_save2D.png') no-repeat center center; position: relative; top: -3px;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave:hover {box-shadow:0px 0px 2px #555; border-radius: 50%;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave.completed {background:url('../images/icon_save2_completed.png') no-repeat center center;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave.completed:hover {box-shadow: 0px 0px 2px #555;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .pagingBtnWrap button {margin: 0 5px;}

/** JOIN **/
.frMiddle .joinWrap {width: 100%; margin: 0 auto;}
.frMiddle .joinWrap .frMdWrap {padding: 120px 0 100px;}
.frMiddle .joinWrap .frMdWrap .title {margin-bottom: 30px;}
.frMiddle .joinWrap .frMdWrap label {font-size: 0.8em; color: #888;}
.frMiddle .joinWrap .frMdWrap label input[type='checkbox'],
.frMiddle .joinWrap .frMdWrap label input[type='radio'] {width: 18px; height: 18px; position: relative; top: 2px; margin-right: 10px;}
/* JOIN_회원가입단계 */
.frMiddle .joinWrap .frMdWrap .stepWrap {height: auto; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 30px;}
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep {font-size: 1.5rem; font-weight: 700; text-align: center; width: 27%; height: 80px; line-height: 80px; border: 1px solid #ccc; color: #999; box-sizing: border-box;}
.frMiddle .joinWrap .frMdWrap .conclulsion {text-align: center; font-size: 2.3rem; font-weight: 700; margin: 150px 0 50px;}
/* JOIN_회원가입 단계별 디자인 변경 */
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep.ongoing {border: 3px solid #4085D8; color: #222;}
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep.completed:after {content: ""; display: inline-block; width: 42px; height: 36px; position: relative; top: 6px; right: -10px; background-image: url("../images/icon_completed.png"); background-size: contain; background-repeat: no-repeat;}
/* JOIN_버튼 */
.frMiddle .joinWrap .frMdWrap .bttnWrap {width: 100%; max-width: 1300px; text-align: center; margin-top: 100px;}
.frMiddle .joinWrap .frMdWrap .bttnWrap button {padding: 18px 45px;}
.frMiddle .joinWrap .frMdWrap .bttnWrap button:first-of-type {margin-right: 10px;}
.dot {width: 35px; height: 80px; background: url('../images/dot.png') no-repeat center center;}
.dotB {width: 35px; height: 80px; background: url('../images/dotB.png') no-repeat center center;}
/* JOIN_약관이용 동의 */
.frMiddle .joinWrap .frMdWrap .joinClause {width: 100%; height: 350px; overflow: auto; border: 1px solid #555; font-size: 1.1rem; font-weight: 300; line-height: 200%;}
.frMiddle .joinWrap .frMdWrap .joinClause dl {width: 100%; padding: 50px 50px; box-sizing: border-box; margin: 0 auto;}
.frMiddle .joinWrap .frMdWrap .joinClause dl dt {margin-top: 3em;}
.frMiddle .joinWrap .frMdWrap .joinClause dl dt:nth-of-type(1) {margin-top: 0;}
.frMiddle .joinWrap .frMdWrap .joinClause .line::before {content: '- ';}
.frMiddle .joinWrap .frMdWrap .joinChek {margin-top: 20px; display: inline-block; font-size: 1.2rem;}
/* JOIN_회원정보 입력_기본정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation {width: 100%; height: auto; margin: 50px auto 0; font-size: 1.3rem;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap {width: 100%; height: auto; padding: 50px 0; margin-bottom: 30px; display: flex; justify-content: left; align-items: center; gap: 50px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .title {font-size: 1.5em; font-weight: 700; line-height: 100%; display: inline-block; width: auto; margin: 0;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .btnMemberCheck {width: auto; display: flex; justify-content: right; gap: 20px; font-size: 1.1rem; color: #646464;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .btnMemberCheck label {font-size: 1em; color: #646464;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate {width: 100%; height: auto; display: flex; justify-content: space-between; gap: 15%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate div {width: 50%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate .joinLabel {width: 100%; height: 160px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitle {font-size: 1em; line-height: 100%; display: block;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .subtitle.t2 {padding: 10px 0; border-bottom: 1px solid #ccc;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .subtitle .cr1 {position: relative; top: 3px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel input[type='text'],
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel input[type='password'] {display: block; width: 100%; height: 50px; margin: 10px 0 5px; font-size: 0.8em; font-weight: 400; color: #555; padding: 0 50px 0 10px; box-sizing: border-box;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel input[class^='inputShort'] {display: inline-block; width: 73%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel input:focus {border: 1px solid #555;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnInptClose {width: 18px; height: 18px; border: 0; position: relative; float: right; top: -40px; left: -15px; margin-left: -18px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnInptClose.short {top: 26px; left: -30%; margin-left: -18px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnCheck {width: 25%; max-width: 110px; height: 50px; position: relative; top: 10px; float: right; font-size: 0.7em; background: #555; border: none; color: #DCDCDC;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnCheck:hover {font-weight: 300; background: #444;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .description {width: 100%; height: auto; display: block; font-size: 0.7em; color:#b3b7bc;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .mailAgrr {width: 100%; margin-top: 20px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .mailAgrr label {margin-right: 20px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .mailAgrr label:last-of-type {margin-right: 0;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel select {display: block; width: 100%; height: 50px; margin-top: 10px; font-size: 0.8em; color: #888; padding: 0 10px; border: 1px solid #ccc; appearance:none; background:url('../images/selectArrow.png') no-repeat 97% 50%/15px auto; box-sizing: border-box;}
/* JOIN_회원정보 입력_기본정보 : SNS로그인 */
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel.sns input[class^='inputShort'] {width: 100%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel.sns .btnCheck {display: none;}

/* JOIN_회원정보 입력_관심정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap {width: 100%; height: auto; padding: 50px 0}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .title {font-size: 1.5em; font-weight: 700; line-height: 100%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation.sect2 .subtitWrap {width: 100%; height: auto; border-top: 1px dotted #ddd; display: flex; justify-content: left; align-items: end;}
.frMiddle .joinWrap .frMdWrap .joinInfomation.sect2 .subtitWrap .title {display: inline-block;}
.frMiddle .joinWrap .frMdWrap .joinInfomation.sect2 .subtitWrap .description {font-size: 0.8em; line-height: 150%; color:#949494; display: inline-block; text-align: left;}
.frMiddle .joinWrap .frMdWrap .joinInfomation.sect2 .joinLabel {width: 100%; height: auto; margin-bottom: 70px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnShowInterest {width: 70px; height: 28px; background: #555555; color: #DCDCDC; border: none; border-radius: 5px; font-size: 0.6em; cursor: pointer; margin-left: 10px; position: relative; top: -3px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnShowInterest:hover {background: #444;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .interestList {margin-top: 10px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .interestList span {font-size: 0.8em; line-height: 100%; color:#949494;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .checkList {margin-top: 10px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .checkList label {height: auto; margin: 0 20px 5px 0; display: inline-block;}


/** LOGIN **/
.frMiddle .loginWrap {width: 100%; height: auto; padding: 120px 0 80px;}
.frMiddle .loginWrap .frMdWrap {max-width: 700px; border: 1px solid #d4d4d4; border-radius: 5px;}
.frMiddle .loginWrap .frMdWrap .title {text-align: center; padding: 60px 0;}
.frMiddle .loginWrap .frMdWrap .loginLabel {width: auto; max-width: 400px; height: 140px; margin: 0 auto; font-size: 1.5rem;}
.frMiddle .loginWrap .frMdWrap .loginLabel .subtitle {font-size: 1em; line-height: 100%; display: block;}
.frMiddle .loginWrap .frMdWrap .loginLabel input {display: block; width: 100%; height: 50px; margin: 10px 0 5px; font-size: 0.8em; font-weight: 400; color: #555; padding: 0 50px 0 10px; box-sizing: border-box;}
.frMiddle .loginWrap .frMdWrap .loginLabel input:focus {border: 1px solid #555;}
.frMiddle .loginWrap .frMdWrap .loginLabel .description {font-size: 0.7em; color:#b3b7bc;}
.frMiddle .loginWrap .frMdWrap .loginLabel .btnInptClose {width: 18px; height: 18px; border: 0; position: relative; top: -38px; left: 360px;}
.frMiddle .loginWrap .frMdWrap .loginChek {width: auto; max-width: 400px; margin: 0 auto; font-size: 1.5rem;}
.frMiddle .loginWrap .frMdWrap .loginChek input[type='checkbox'] {width: 20px; height: 20px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap {width: 100%; height: auto; text-align: center; margin-top: 80px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap span,
.frMiddle .loginWrap .frMdWrap .bttnWrap a {font-size: 1.1rem; color: #848484;}
.frMiddle .loginWrap .frMdWrap .bttnWrap button {margin-bottom: 20px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap.iconLogin {width: 100%; display: flex; justify-content: center; gap: 30px; margin-top: 50px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap .iconWrap {width: 60px; margin: auto 10px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap .iconWrap a {width: 60px; height: 60px; border-radius: 50%; display: inline-block;}
.frMiddle .loginWrap .frMdWrap .bttnWrap .iconWrap a[class='btnLoginKakao'] {background: url('../images/icon_kakao.png') no-repeat -3px center; background-size: 450%; text-indent: -9999px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap .iconWrap a[class='btnLoginNaver'] {background: url('../images/icon_naver.png') no-repeat left center; background-size: 100%; text-indent: -9999px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap .iconWrap a[class='btnLoginGoogle'] {background: url('../images/icon_google.png') no-repeat -14px center; background-size: 150%; text-indent: -9999px; border:1px solid #eee;}
.frMiddle .loginWrap .frMdWrap .bttnWrap .iconWrap span {font-size: 1rem; color:#b3b7bc;}
.frMiddle .loginWrap .frMdWrap .warning {width: 100%; max-width: 580px; margin: 30px auto 0; padding: 30px 0 30px; text-align: center; border-top: 1px solid #DCDCDC; font-size: 1.1rem; line-height: 150%; letter-spacing: -0.01rem; color: #999; word-break: keep-all;}


/** FIND ID/PW **/
.frMiddle .findIdPwWrap .frMdWrap {padding: 120px 0 100px;}
.frMiddle .findIdPwWrap .frMdWrap .description {font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.06rem; color: #999; margin-top: 20px;}
.frMiddle .findIdPwWrap .frMdWrap .description .important {color:#f73333; display: block;}
.frMiddle .findIdPwWrap .frMdWrap .findWrap {width: 100%; height: auto; display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; font-size: 0.9rem; text-align: center;}
.frMiddle .findIdPwWrap .frMdWrap .findWrap .findID,
.frMiddle .findIdPwWrap .frMdWrap .findWrap .findPW {width: 100%; height: auto; border: 1px solid #d4d4d4; padding: 40px 0; box-sizing: border-box;}
.frMiddle .findIdPwWrap .frMdWrap  .subtitle {font-size: 1.8em; color: #222; line-height: 100%; display: block; margin-bottom: 50px;}
.frMiddle .findIdPwWrap .frMdWrap .label {width: 100%; height: 50px; margin-bottom: 10px; font-size: 1.4rem;}
.frMiddle .findIdPwWrap .frMdWrap .label .infoTitle {width: 10%; min-width: 60px; display: inline-block; text-align: right; margin-right: 10px;}
.frMiddle .findIdPwWrap .frMdWrap .label .infoResult {line-height: 50px; color: #555555;}
.frMiddle .findIdPwWrap .frMdWrap .label .resultID {font-size: 1em; line-height: 100%; font-weight: 700; margin: 0 0.5em; color: #4085D8;}
.frMiddle .findIdPwWrap .frMdWrap .label input {width: 55%; height: 50px; font-size: 1em; font-weight: 400; color: #555; padding: 0 40px 0 10px; box-sizing: border-box;}
.frMiddle .findIdPwWrap .frMdWrap .label input:focus {border: 1px solid #555;}
.frMiddle .findIdPwWrap .frMdWrap .label .btnInptClose {width: 18px; height: 18px; border: 0; position: relative; float: right; top: -40px; left: -15px; margin-left: -18px;}
.frMiddle .findIdPwWrap .frMdWrap button {width: 180px; padding: 18px 0; margin-top: 50px;}


/** 이용약관/개인정보처리방침/이메일무단수집거부/서비스정책 **/
.frMiddle .frMdWrap.lotisRule {padding: 120px 0 50px;}
.frMiddle .frMdWrap.lotisRule .article {width: 100%; height: auto; min-height: 400px; padding: 50px 0; font-size: 1.3rem; line-height: 200%; color: #888; text-align: justify;}
.frMiddle .frMdWrap.lotisRule .article a {text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #ccc;}
.frMiddle .frMdWrap.lotisRule .article .title {margin: 25px 0;}
.frMiddle .frMdWrap.lotisRule .article .subTxt {text-indent: 1em;}
.frMiddle .frMdWrap.lotisRule .purpose {width: 100%; height: auto; text-align: center;}
.frMiddle .frMdWrap.lotisRule .purpose p {font-size: 1.2rem; line-height: 140%; color: #3E3E3E; margin-top: 70px;}
.frMiddle .frMdWrap.lotisRule .purpose p span {display: block;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg {width: 100%; height: auto; display: flex; justify-content: space-between; margin: 50px 0;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div {width: 30%; height: 250px; display: flex; flex-direction: column; align-items: center; gap: 20px; justify-content: flex-end; font-size: 1.0rem;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img01"] {background: url("../images/lotis_ic01.png") no-repeat center 30px #F7F8FA; padding: 20px; box-sizing: border-box;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img02"] {background: url("../images/lotis_ic02.png") no-repeat center 50px #F7F8FA; padding: 20px; box-sizing: border-box;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img03"] {background: url("../images/lotis_ic03.png") no-repeat center 30px #F7F8FA; padding: 20px;}

/** 선택된 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestList {width: 100%; height: auto; overflow: auto;}
.frMiddle .interestList span {color: #666; display: inline-block; margin-bottom: 8px;}
.frMiddle .interestList span::after {content: "/"; margin-left: 5px;}
.frMiddle .interestList span:last-of-type:after {content: none;}
/** 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestContainer {width: 100%; height: 100%; position: fixed; top: 130px; z-index: 1000; text-align: right; font-size: 1rem;}
.frMiddle .interestContainer .interestWrap {width: 100%; height: 70%; max-height: 600px; padding: 50px 50px; box-sizing: border-box; z-index: 100000; overflow: auto; background-color: #fff; text-align: center; border: 3px solid #1D1D1D;}
.frMiddle .interestContainer .interestWrap table {width: 100%; height: auto; padding: 0; border: none; border-spacing: 10px; font-size: 1.2em;}
.frMiddle .interestContainer .interestWrap .interestTb {display: table;}
.frMiddle .interestContainer .interestWrap .interestTb tr td {width: 20%; height: 110px; border: 1px solid #ccc; padding: 0; margin: 0; vertical-align: middle; cursor: pointer;}
.frMiddle .interestContainer .interestWrap table tr td[class^='selected'] {border: 1px solid #4085D8; background: #f7faff;}
.frMiddle .interestContainer .interestWrap table tr td span {width: 100%; height: auto; border: none; display: inline-block; padding: 8px 8px; box-sizing: border-box; cursor: pointer;}
.frMiddle .interestContainer .btnSelected {width: auto; height: auto; border: none; background: transparent; font-size: 1.6em; line-height: 100%; color: #fafafa; margin: 0 10px 15px 0;}
.frMiddle .interestContainer .btnclose {width: 20px; height: 20px; background:url('../images/icon_deleteW.png') no-repeat center center; background-size: contain; border: none; border-radius: 0; margin-bottom: 15px; position: relative; top: 1px;}
.frMiddle .interestContainer .interestWrap .interestTb2 {display: none;}
.frMiddle .interestContainer .interestWrap .interestTb2 tr td {width:33%; height:110px; border: 1px solid #ccc; padding: 0; margin: 0; vertical-align: middle; cursor: pointer;}

/** NO PAGE **/
.frMiddle.nopage {display: flex; justify-content: center; align-items: center;}
.frMiddle.nopage p {font-size: 4.0rem; line-height: 150%; text-align: center;}

/*** Aside : Floating **
.frMdWrap.SubAtc .artcFloatBanner {width:100%; position: relative; z-index: 99999;}
.frMdWrap.SubAtc .artcFloatBanner .floatBnnr {width:18px; height:100%; position: relative; float: right; right:60px;}
.frMdWrap.SubAtc .artcFloatBanner .floatBnnr .btnSave {position: fixed; top: 85%; width: 70px; height: 70px; border: none; border-radius:100%; background:#ccc; opacity: 0.8; text-align: center; padding: 0.7em; font-size: 1.1em; font-weight: 700; color:#181818;}
*/

/*** BOTTOM FRAME ***/
.frBottom {width: 100%;}
/* BOTTOM FRAME_사이트정보/규약 */
.frBottom .information {width: 100%; height: auto; padding: 10px 2.5% 0; box-sizing: border-box; border-top: 1px solid #bebebe;}
.frBottom .information .infoList {width: 100%; max-width: 1350px; height: auto; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start;}
.frBottom .information .infoList div {height: 100%; display: flex; align-items: center; gap: 20px; margin-right: 20px;}
.frBottom .information .infoList a,
.frBottom .information .infoList span {font-size: 1rem; line-height: 200%; letter-spacing: -0.01rem; color:#999;}
.frBottom .information .infoList button {border: none; background: none; font-size: 0.9rem; line-height: 200%; letter-spacing: -0.01rem; color:#444; text-align: right; position: relative; top: -3px;}
.frBottom .information .infoList a:hover,
.frBottom .information .infoList button:hover {color: #4E4E4E;}
/* BOTTOM FRAME_사업장주소/연락처 */
.frBottom address {width: 100%; height: auto; padding: 30px 2.5%; box-sizing: border-box;}
.frBottom address .addressWrap {width: 100%; max-width: 1350px; height: auto; margin: 0 auto; display: flex; justify-content: left; align-items: flex-start; gap: 80px; color:#999; font-size: 1rem; line-height: 150%; padding-bottom: 15px;}
.frBottom address .addressWrap img {width: 150px; height: auto; content: url('../images/f_logo.png');}
.frBottom address .addressWrap div span {display: inline-block; width: auto; height: auto; margin: 0 10px 5px 0;}
.frBottom address .addressWrap span:last-of-type {margin: 0; display: block;}

/* BOTTOM FRAME_ASIDE : 관련사이트 팝업 */
.popupCoSite {width:100%; height: 100%; margin: 0 auto; position: fixed; top: 15%;}
.popupCoSite .popupCoSiteWrap {width: 50%; height: auto; max-height: 80%; overflow: hidden; margin: 0 auto; position: relative; background:#fff; z-index: 50000000; text-align: center; padding: 100px 0;}
.popupCoSite .popupCoSiteWrap a {width: 300px; height: 60px; font-size: 2rem; font-weight: 300; line-height: 60px; border: 1px solid #fff; display: inline-block; margin: 10px 20px;}
.popupCoSite .popupCoSiteWrap a:hover {border: 1px solid #999;}


/*** Aside : Popup Banner ***/
/* 접힘 */
.pb_wrap {width: 100%; height: auto; position: fixed; bottom: 0; z-index: 99999; opacity: 0; background: #505050; box-shadow: 0px -2px 5px 1px rgba(68, 68, 68, 0.2); transition-duration:.8s;}
.pb_wrap.show {opacity: 0.8;}
.pb_wrap .btnFold {display: none;}
.pb_wrap .popbanner {max-width: 1350px; min-width: 450px; height: auto; margin: 0 auto;  padding: 10px 30px; transition-duration:.2s;}
.pb_wrap .popbanner .pb_top {display: block; background: none; color: #DCDCDC; font-size: 1rem; font-weight: 300; cursor: pointer;}
.pb_wrap .popbanner .pb_top strong {color: #33a5f7;}
.pb_wrap .popbanner .btnWrap {width: 120px; display: flex; justify-content: right; gap: 5px; align-items: center; font-size: 0.8rem; position: relative; right: 0; float: right; z-index: 888888; color: #C8CBCC; border-radius: 30px; padding: 1px 10px 0 1px; background: #474747;}
.pb_wrap .popbanner .btnWrap .btnClose {width: 10px; height: 10px; background: url("../images/icon_deleteW.png") no-repeat center center; background-size: cover; position: relative; top: -1px; border: none;}
.pb_wrap .popbanner ul.list {display: none;}

/* 펼침 : click event */
.pb_wrap.unfold {width: 100%; height: auto; position: fixed; bottom: 0; z-index: 99999; opacity: 1; background: #505050; box-shadow: 0px -2px 5px 1px rgba(68, 68, 68, 0.2); transition-duration:.2s;}
.pb_wrap.unfold .popbanner {max-width: 1350px; min-width: 450px; height: auto; margin: 0 auto; opacity: 1; padding: 0 30px 15px; transition-duration:.2s;}
.pb_wrap.unfold .btnFold {width: 100px; margin: 0 auto; height: 40px; background: url("../images/btn_down2.png") no-repeat center 10px; display: block;}
.pb_wrap.unfold .popbanner .pb_top {display: block; /*background: url("../images/btn_down2.png") no-repeat center top;*/ color: #fff; font-size: 1.1rem; font-weight: 300; cursor: initial;}
.pb_wrap.unfold .popbanner .pb_top strong {color: #33a5f7;}
.pb_wrap.unfold .popbanner .btnWrap {width: 120px; display: flex; justify-content: right; gap: 5px; align-items: center; font-size: 0.8em; position: relative; margin-top: -30px; right: 0; float: right; z-index: 888888; color: #C8CBCC;}
.pb_wrap.unfold .popbanner .btnWrap .btnClose {width: 10px; height: 10px; background: url("../images/icon_deleteW.png") no-repeat center center; background-size: cover; position: relative; top: -1px; border: none;}
.pb_wrap.unfold .popbanner ul.list {width: 100%; height: 88px; overflow: hidden; margin-top: 15px; display: inline-block; overflow: auto; white-space: nowrap; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
.pb_wrap.unfold .popbanner ul.list::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
.pb_wrap.unfold .popbanner ul li {height: 52px; overflow: hidden; list-style: none; text-overflow: ellipsis; -webkit-line-clamp: 3; display : -webkit-box; -webkit-box-orient : vertical; white-space: initial;}
.pb_wrap.unfold .popbanner ul a {display: inline-block; width: 186px; height: auto; margin-right: 3px; overflow: hidden; padding: 13px 15px; box-sizing: border-box; border: 1px solid #949494; border-radius: 5px; font-size: 0.9rem; line-height: 130%; color: #fff; font-weight: 300;}
.pb_wrap.unfold .popbanner ul a:hover,
.pb_wrap.unfold .popbanner ul a.visited:hover {background: #474747;}
.pb_wrap.unfold .popbanner ul a.visited {border: 1px solid #666; color: #b1b1b1;}


/*** Aside : Cookie banner ***/
.ck_wrap {width: 100%; height: auto; position: fixed; bottom: 0; z-index: 99999; opacity: 1; background: #505050; box-shadow: 0px -2px 5px 1px rgba(68, 68, 68, 0.2); transition-duration:.8s;}
.ck_wrap .cookie {max-width: 1350px; min-width: 450px; height: auto; margin: 0 auto; display: flex; justify-content: space-between; padding: 40px 30px; transition-duration:.2s;}
.ck_wrap .cookie .ckTxt {width: auto; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: end; gap: 20px; color: #DCDCDC; font-size: 1.1rem;}
.ck_wrap .cookie .ckTxt a,
.ck_wrap .cookie .ckTxt a:hover,
.ck_wrap .cookie .ckTxt a:visited {font-size: 1em; color: #33a5f7; display: inline-block; text-decoration: underline;}
.ck_wrap .cookie .ckTxt p {line-height: 180%;}
.ck_wrap .cookie .ckTxt .checkList {display: flex; gap: 20px;}
.ck_wrap .cookie .ckTxt .checkList input {width: 18px; height: 18px; position: relative; top: 2px; margin-right: 5px;}
.ck_wrap .cookie .btnWrap {width: 30%; padding-left: 100px; box-sizing: border-box; height: auto; display: flex; flex-direction: column; gap: 10px;}
.ck_wrap .cookie .btnWrap button {width: 100%; min-width: 100px; height: auto; font-size: 1rem; padding: 10px 0; border-radius: 3px; border: none; background: #ebebeb; cursor: pointer;}
.ck_wrap .cookie .btnWrap button:hover,
.ck_wrap .cookie .btnWrap button:active {background: #b8b8b8;}

/*** 페이징 스타일 : BOARD, MY PAGE ***/
.pagingBtnWrap {width: 100%; text-align: center;}
.pagingBtnWrap button {border: none; background: transparent; font-weight: 700; font-size: 1.4rem; line-height: 100%;}
.pagingBtnWrap .btnGoFirst,
.pagingBtnWrap .btnGoPrev,
.pagingBtnWrap .btnGoNext,
.pagingBtnWrap .btnGoLast {color: #333;}
.pagingBtnWrap .btnNum {color: #999;}
.pagingBtnWrap .btnNum:hover {color: #333; border-bottom: 1px solid #333;}
.pagingBtnWrap .btnhover {color: #333; border-bottom: 1px solid #333;}


/*** 팝업 POPUP : MAIN ***/
.popup_main{word-break: break-all; line-height: 170%;}
/* 팝업공통 */
.popup_main .popbottom {float:right; position:relative; top: 12px;}
.popup_main .popbottom > label{font-size:13px; color:#fff; position: relative;}
.popup_main .popbottom > label > input[id="popcheck"]{width: 16px; height: 16px; background-color:#fff; margin-right:12px; margin-top: 3px; position: absolute; right:100px;}
.popup_main .popbottom > label > input[id="popcheck"]:checked{width: 16px; height: 16px; background-color:#000; margin-right:12px; margin-top: 3px; position: absolute; right:100px;}
.popup_main .popbottom button {border: none; background: none;}
.popup_main .popbottom .close_btn{width:12px; height:12px; background:url('../images/btn_popup_close.png'); margin-left:7px; position:relative; top:1px;}

/* 텍스트 팝업 */
.popup_main .textPopup {width:400px; position:absolute; top:140px; left:20px; z-index:999; background: #222; padding: 0 10px 20px;}
.popup_main .textPopup .popupTitle {width: 100%; height: 50px; font-size: 13pt; color: #fff; font-weight: 700; line-height: 50px;}
.popup_main .textPopup .popupBody {width: auto; min-height:300px; max-height:800px; overflow:auto; background: #fff; padding: 15px; font-size: 11pt;}

/* 이미지 팝업 */
.popup_main .imgPopup {width: 400px; position: absolute; top: 140px; left: 500px; z-index: 999; background: #222; padding: 10px 10px 20px;}
.popup_main .imgPopup .popupBody {width: auto; min-height:300px; max-height:800px; overflow:auto;}
.popup_main .imgPopup .popupBody img {width: 100%;}

/* 이미지+텍스트 팝업 */
.popup_main .imgTxtPopup {width:500px; position:absolute; top:140px; left:500px; z-index:999; background: #222; padding: 0 10px 20px;}
.popup_main .imgTxtPopup .popupTitle {width: 100%; height: 50px; font-size: 13pt; color: #fff; font-weight: 700; line-height: 50px;}
.popup_main .imgTxtPopup .popupBody {width: auto; min-height: 300px; max-height: 800px; padding: 15px; overflow: auto; background-color: #fff;}
.popup_main .imgTxtPopup .popupBody img {width: 100%; height: 250px; background-size: cover;}
.popup_main .imgTxtPopup .popupBody .pupupTxt {width: auto; font-size: 11pt; margin-top: 20px;}


/*** Title, Article, Substance, Date, Hits, Etc ***/
[class^='title'] {letter-spacing: -0.05rem;  font-weight: 700; letter-spacing: -0.06rem; color:#333; line-height: 100%;}
[class^='substance'],[class^='article'] {letter-spacing: -0.01rem; line-height: 130%;}
[class^='date'],[class^='hits'] {letter-spacing: -0.04rem; }

.date, .hits,.date1, .hits1, .keyword2, .iconSave1, .iconBack1 {font-size:1.2em; font-weight: 400; line-height: 100%; letter-spacing: -0.04rem;}
.iconSave2 {font-size:0.9em; font-weight: 700; line-height: 100%; letter-spacing: -0.04rem;}
.hideBg {width: 100%; height: 100%; background: #000; opacity:0.5; z-index: 100; position: fixed; top: 0px;}
.hideBg2 {width: 100%; height: 100%; background: #000; opacity:0.5; z-index: 100; position: fixed; top: 0px;}
.substance, .article {word-break:break-all;}

/*** Button, Cursor ***/
[class^='btn'] {font-family: 'NanumBarunGothic'; cursor:pointer;}
.iconSearch [class^=thumbnail] {cursor:pointer;}

.btnMore {font-size: 1.2rem; font-weight: 300; line-height: 100%; letter-spacing: -0.01rem; color: #666; padding: 18px 60px; border: 1px solid #b3b7bc; background: transparent; display: inline-block; transition-duration:.3s;}
.btnMore:hover, .btnMore.selected {border: 1px solid #555; background: #555; color: #fff;}
.btnT01 {font-size: 1.2rem; font-weight: 300; line-height: 100%; letter-spacing: -0.01rem; color:#DCDCDC; padding: 18px 60px; border: 1px solid #D9D9D9; background: #555; display: inline-block; transition-duration:.3s}
.btnT01:hover {color:#DCDCDC; background: #444;}
.btnT02 {font-size: 1.2rem; font-weight: 300; line-height: 100%; letter-spacing: -0.01rem; color:#999; padding: 18px 60px; border: 1px solid #D9D9D9; background: transparent; display: inline-block; transition-duration:.3s;}
.btnT02:hover {border: 1px solid #777;}
.btnInptClose {background: url('../images/btn_close2.png') no-repeat center center; width: 18px; height: 18px; border: none;}
.btnclose {width: 41px; height: 41px; background: url('../images/icon_delete.png') no-repeat center center; border: 1px solid #444; border-radius: 100%;}
.btnSave {border: none;}
.btnMedia {font-size: 1rem; font-weight: 300; line-height: 100%; letter-spacing: -0.01rem; color:#888888; padding: 8px 10px; border: 1px solid #D9D9D9; border-radius: 10px; background: #ffffff; display: inline-block; transition-duration:.3s}
.btnMedia:hover {color:#DCDCDC; background: #444;}
.btnMedia div {
  display: flex; align-items: end;
}
.btnMedia span.material-symbols-outlined {
  font-size: 20px;
}
.btnMedia span.btn-title {
  margin-left: 5px;
}
audio.article-voice {
  vertical-align: bottom;
  height: 38px;
}
audio.article-voice.voice-para {
  margin-bottom: 6px;
}

/* 적응형 : 가로 사이즈 별 (메인)컨텐츠 노출 개수 조정 */
@media only screen and (max-width:1650px) {
.frMiddle .frMdWrapMain .contContainer .contents:nth-child(4) {display: none;}
/* 접혀진 컨텐츠 : fold 적용 */
.frMiddle .frMdWrapMain .contContainer .contents.fold {width: 18%;}
}


/* 적응형 : 가로 사이즈 별 (메인)컨텐츠 노출 개수 조정 */
@media only screen and (max-width:1500px) {
.frMiddle .frMdWrapMain .contContainer .contents:nth-child(3) {display: none;}
/* 접혀진 컨텐츠 : fold 적용 */
.frMiddle .frMdWrapMain .contContainer .contents.fold {width:25%;}
}

/* 모바일 */
@media only screen and (max-width:1350px) {
/* 접혀진 컨텐츠 : fold 적용 */
.frMiddle .frMdWrapMain .contContainer .contents.fold {display: none;}

/*** TOP FRAME ***/
/* Top Menu */


/*** MIDDLE FRAME ***/
.frMiddle {font-size: 0.9rem;}
.frMiddle .title.t01 {font-size: 2.8rem;}
.frMiddle .title.t02 {font-size: 2.5rem;}
.frMiddle .title.t03 {font-size: 2.0rem;}
.frMiddle .title.t04 {font-size: 1.8rem;}
.frMiddle .title.t05 {font-size: 1.5rem;}
.frMiddle .title.t06 {font-size: 1.5rem;}
.frMiddle .frMdWrap {padding: 0 5%; box-sizing: border-box;}


/** MIDDLE FRAME : MAIN **/
/* 메인 슬라이드 */
.frMiddle .mSlide .title {max-width: 800px;}
.frMiddle .mSlide .rollerWrap {height: 320px;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 400px; height: auto; font-size: 0.9rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt {width: 100%; height: auto; position: relative;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .title {height: 1.9rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .substance {height: 3.1rem; margin-top: 20px;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt a.btn_more {background: #1D1D1D; color: #DCDCDC;}
.frMiddle .mSlide .rollerWrap .roller .contents:hover .substance {-webkit-line-clamp: 2;}

/* 카테고리 메뉴 */
.frMiddle .category .ctMenuWrap {max-width: 1000px; margin-top: 40px;}
.frMiddle .category .ctMenuWrap .ctMenu button {width: 85px; height: 85px; border-radius: 24px; background-size: 70%;}
.frMiddle .category .ctMenuWrap .ctMenu span {font-size: 0.9rem;}
.frMiddle .category .ctMenuTypeWrap {max-width: 1000px; margin-top: 40px;}
.frMiddle .category .ctMenuTypeWrap .ctMenu button {width: auto; height: 60px; padding: 0 20px; border-radius: 24px; background-size: 70%; font-family: inherit; font-size: 1rem;}
.frMiddle .category .ctMenuTypeWrap .ctMenu span {display: none;}
/* 카테고리 메뉴 : 키워드 */
.frMiddle .category .hotKeyword {max-width: 1000px;}
.frMiddle .category .hotKeyword .keyword {font-size: 1rem;}

/* 펼쳐진 컨텐츠 */
.frMiddle .frMdWrapMain {padding: 100px 2.5%;}
.frMiddle .frMdWrapMain .contContainer {margin: 60px auto 0; padding-bottom: 60px; display: block;}
.frMiddle .frMdWrapMain .contContainer .contents {width: 100%; min-width: 300px; max-width: unset; margin: 0 auto;}
/* 접혀진 컨텐츠 : fold 적용 */
.frMiddle .frMdWrapMain .contContainer .contents.fold {display: none;}
/* 페이징 넘버 : 가로 1350px 이하 fold 없을 때 사용 */
.frMiddle .frMdWrapMain .pagingBtnWrap {width: auto; height: auto; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px;}
.frMiddle .frMdWrapMain .pagingBtnWrap .btnNum {display: inline-block; width: 50px; height: 50px; font-size: 1.2rem; background: transparent; color: #555; border: 1px solid #b3b7bc; box-sizing: border-box; font-weight: 100;}
.frMiddle .frMdWrapMain .pagingBtnWrap .btnNum:hover,
.frMiddle .frMdWrapMain .pagingBtnWrap .btnNum.selected {background: #555; color: #fff;}
.frMiddle .frMdWrapMain .pagingBtnWrap .btnMore {width: 120px; height: 50px; border: 1px solid #b3b7bc; padding: 0 0; font-size: 1.2rem; line-height: 50px; box-sizing: border-box;}

/* MAIN_BOTTOM_이전읽은글, 담아둔글 */
.frMiddle .mainBottom .storage .storageWrap {width: 100%;}

/* MAIN_BOTTOM_관계기관 */
.frMiddle .mainBottom .cooperation {padding: 40px 2.5% 20px; text-align: center;}
.frMiddle .mainBottom .cooperation .cooperationList {width: auto; display: inline-block;  justify-content: unset;}
.frMiddle .mainBottom .cooperation .cooperationList img {width: 170px; margin: 0 15px 20px 15px;}


/** NEWS **/
/* NEWS_카테고리 메뉴 */
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu button {width: 85px; height: 85px; border-radius: 24px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu button {width: auto; height: 40px; padding: 0 20px; border-radius: 24px; font-family: inherit; font-size: 1rem;}
/* NEWS_카테고리 메뉴 : 키워드 */
.frMiddle .NewsWrap.NewsSort .hotKeyword {height: 90px;}
/* NEWS_리스트 */
.frMiddle .NewsWrap.news {width: 100%; padding: 50px 0 100px; box-sizing: border-box;}


/** VIEW **/
.frMiddle .frMdWrap.SubAtc {padding: 120px 5% 50px; box-sizing: border-box;}


/** TREND **/
/* TREND_메뉴 */
.frMiddle .trendWrap .frMdWrap.trendMenu {padding: 0 5%; box-sizing: border-box;}


/** BOARD VIEW : Comment **/
.frMiddle .boardViewWrap .comment .commentWrite div {max-width: 700px;}
.frMiddle .boardViewWrap .comment .commentWrite .stitle,
.frMiddle .boardViewWrap .comment .commentWrite .stitle2 {min-width: 70px;}
.frMiddle .boardViewWrap .comment .commentWrite input,
.frMiddle .boardViewWrap .comment .commentWrite select {width: 170px;}

/** MY PAGE **/
.frMiddle .MypageWrap {padding: 120px 0 100px;}
/* MY PAGE_회원정보 */
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle {width: 150px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel input[type='text'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel input[type='password'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody select {width: 255px;}


/** JOIN **/
.frMiddle .joinWrap .frMdWrap {padding: 120px 5% 100px; box-sizing: border-box;}

/** FIND ID/PW **/
.frMiddle .findIdPwWrap .frMdWrap {padding: 120px 5% 100px; box-sizing: border-box;}
.frMiddle .findIdPwWrap .frMdWrap .label .infoTitle {width: 10%;}
.frMiddle .findIdPwWrap .frMdWrap .label input {width: 65%;}

/** 이용약관/개인정보처리방침/이메일무단수집거부/서비스정책 **/
.frMiddle .frMdWrap.lotisRule {padding: 120px 5% 50px; box-sizing: border-box;}

/*** BOTTOM FRAME ***/
/* BOTTOM FRAME_사이트정보/규약 */
.frBottom .information .infoList div {display: inline;}
.frBottom .information .infoList div a,
.frBottom .information .infoList div span {margin-right: 20px; display: inline-block;}
/* BOTTOM FRAME_사업장주소/연락처 */
.frBottom address .addressWrap img {display: none;}
/* BOTTOM FRAME_ASIDE : 관련사이트 팝업 */
.popupCoSite .popupCoSiteWrap {padding: 30px 0;}
.popupCoSite .popupCoSiteWrap a {font-size: 1.8rem;}
}

/* 모바일 */
@media only screen and (max-width:1000px) {
.page_navi_w {display: none;}

/*** TOP FRAME ***/
/* Top Menu */
.frTop .tnav {min-width: unset;}
.frTop .tnav .topMenu .tmLeft .menu, .frTop .tnav .topMenu .tmRight {display: none;}
.frTop .tnav .topMenu .iconMmenu {content:url('../images/mobile_icon_menu.png'); display: inline-block;}
.frTop .tnav .topMenu .tmLeft .mLogo {position: absolute; left: 50%; margin-left: -55px;}

/* Mobile Menu */
.mMenu {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100000; background: rgba(0, 0, 0, 0.5);}
.mMenu .mMenuWrap {width: 80%; height: 100%; background: #1D1D1D; z-index: 10000;}
.mMenu .mMenuWrap .mMenuGuide {width: 90%; height: 100%; margin: 0 auto;}
.mMenu .mMenuWrap .mMenuGuide .loginJoin {margin: 0 5%; position: relative; top: 35px; display: flex; justify-content: center; gap: 10px;}
.mMenu .mMenuWrap .mMenuGuide .loginJoin.in {justify-content: left;}
.mMenu .mMenuWrap .mMenuGuide .loginJoin a {color: #999; font-size: 1.1rem;}
.mMenu .mMenuWrap .mMenuGuide .loginJoin span {color: #888; margin: 0 25px;}
.mMenu .mMenuWrap .mMenuGuide .loginJoin .member {width: auto; height: 30px; content: url('../images/icon_member.png');}
.mMenu .mMenuWrap .mMenuGuide .loginJoin .btnLogout {width: auto; height: 30px; line-height: 30px; border: none; background: none; font-size: 0.9rem; font-weight: bold; color: #999;}
.mMenu .mMenuWrap .mMenuGuide .mSearch {display: inline-block; width: 100%; margin-top: 20px; text-align: center; display: none;}
.mMenu .mMenuWrap .mMenuGuide .mSearch input {width: 90%; padding: 10px 10px; border-radius: 5px;}
.mMenu .mMenuWrap .mMenuGuide .menuList {width: 100%; margin-top: 70px; display: inline-block;}
.mMenu .mMenuWrap .mMenuGuide .menuList ul {margin: 0 5%; font-size: 1.1rem;}
.mMenu .mMenuWrap .mMenuGuide .menuList ul li {border-bottom: 1px solid #333; width: 100%;}
.mMenu .mMenuWrap .mMenuGuide .menuList ul li a {color:#D9D9D9; line-height: 45px; font-weight: 300;}
.mMenu .btnClose {width: 26px; height: 26px; background:url('../images/btn_close.png') no-repeat center center; background-size: contain; border: none; position: relative; top: -97%; float: right; right: 7%; z-index: 10000;}


/*** MIDDLE FRAME ***/
.frMiddle {font-size: 0.8rem;}
.frMiddle .title.t01 {font-size: 2.5rem;}
.frMiddle .title.t02 {font-size: 2.2rem;}
.frMiddle .title.t03 {font-size: 1.8rem;}
.frMiddle .title.t04 {font-size: 1.6rem;}
.frMiddle .title.t05 {font-size: 1.2rem;}
.frMiddle .title.t06 {font-size: 1.3rem;}


/** MIDDLE FRAME : MAIN **/
/* 메인 슬라이드 */
.frMiddle .mSlide {padding: 120px 0 90px;}
.frMiddle .mSlide .title {max-width: 700px;}
.frMiddle .mSlide .rollerWrap {height: 300px;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 380px; font-size: 0.7rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .title {height: 1.2rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .substance {height: 2.8rem; font-size: 1.4em; -webkit-line-clamp: 2;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt {font-size: 1.2em;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt a.btn_more {width: 65px; height: 26px; line-height: 26px; background: #1D1D1D; color: #DCDCDC;}
.frMiddle .mSlide .linkNews .btnMore {padding: 20px 42px; border-radius: 5px; font-size: 1rem;}
.frMiddle .mSlide .linkNews .btnMore:hover {background: transparent; color: rgb(75, 75, 75); padding: 20px 42px; background: #fafafa;}

/* 카테고리 메뉴 */
.frMiddle .category .ctMenuWrap {max-width: 750px; display: inline-block;}
.frMiddle .category .ctMenuWrap .ctMenu {width: 19%; margin-bottom: 20px;}
.frMiddle .category .ctMenuTypeWrap {max-width: 750px; display: inline-block;}
.frMiddle .category .ctMenuTypeWrap .ctMenu {width: 19%; margin-bottom: 20px;}
/* 카테고리 메뉴 : 키워드 */
.frMiddle .category .hotKeyword {max-width: 750px; min-width: unset; margin-top: 30px; padding: 0 5%; box-sizing: border-box;}
.frMiddle .category .hotKeyword .keyword {font-size: 1rem;}

/* 펼쳐진 컨텐츠 */
.frMiddle .frMdWrapMain {padding: 100px 5%;}
.frMiddle .frMdWrapMain .contContainer {height: auto; margin: 40px auto 0; padding-bottom: 50px;}
.frMiddle .frMdWrapMain .contContainer .contents {width: 100%; height: auto; display: block; justify-content: unset; padding: 20px 20px; box-sizing: border-box;}
.frMiddle .frMdWrapMain .contContainer .contents img {width: 100%; height: 300px; padding: 0;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt {width: 100%; display: block;  text-align: left; font-size: 0.9rem; padding: 0; margin-top: 50px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .substance {height: 110px; margin-top: 20px; font-size: 1.2em;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtxt {margin-top: 40px; font-size: 1.1em;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap {margin-top: 40px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap a {font-size: 1.1em;}

/* 페이징 넘버 : 가로 1350px 이하 fold 없을 때 사용 */
.frMiddle .frMdWrapMain .pagingBtnWrap .btnNum {width: 45px; height: 45px; font-size: 1.1rem;}
.frMiddle .frMdWrapMain .pagingBtnWrap .btnMore {width: 110px; height: 45px; font-size: 1.1rem; line-height: 45px;}

/* MAIN_BOTTOM_이전읽은글, 담아둔글 */
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] {padding: 40px 0 30px 7%; box-sizing: border-box; background: transparent;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .title {font-size: 1.4rem;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .subtitle {font-size:1.1rem;}

/* MAIN_BOTTOM_관계기관 */
.frMiddle .mainBottom .cooperation .cooperationList img {width: 140px;}


/** NEWS **/
/* NEWS_카테고리 메뉴 */
.frMiddle .NewsWrap.NewsSort {text-align: center;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap {max-width: 750px; display: inline-block;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu {width: 19%; margin-bottom: 20px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap {max-width: 750px; display: inline-block;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu {width: 19%; margin-bottom: 20px;}
/* NEWS_카테고리 메뉴 : 키워드 */
.frMiddle .NewsWrap.NewsSort .hotKeyword {max-width: 750px; min-width: unset; height: 80px; margin: 30px auto 0; padding: 0 5%; box-sizing: border-box;}

/* NEWS_리스트 */
.frMiddle .NewsWrap.news .contentsWrap {font-size: 0.9rem;}
.frMiddle .NewsWrap.news .contentsWrap .contents img {height: 150px;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt .title {height: 1.5rem;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt .substance {height: 63px; margin-top: 16px;}
.frMiddle .NewsWrap.news .contentsWrap .contents .subtxt {margin-top: 16px; font-size: 1.1em;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave {width: 30px; height: 30px; background-size: 60%;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave.completed {background-size: 60%;}
.frMiddle .NewsWrap .NewsWrap.news .btnMore {padding: 18px 60px;}


/** VIEW **/
.frMiddle .frMdWrap.SubAtc .contView {font-size: 0.9rem;}
/* 매인타이틀, 작성자, 게시일 등 */
.frMiddle .frMdWrap.SubAtc .contView .title {margin-bottom: 10px;}
.frMiddle .frMdWrap.SubAtc .contView .titleWrap .subTitle {margin-top: 40px;}
/* 본문글 */
/* 중복요소 */
.frMiddle .frMdWrap.SubAtc .contView .content {padding: 15px 0;}
/* 이미지 */
.frMiddle .frMdWrap.SubAtc .contView img {margin-top: 30px;}
.frMiddle .frMdWrap.SubAtc .contView .imgOrigin {margin: 10px 0 30px;}
.frMiddle .frMdWrap.SubAtc .contView .warning {padding: 15px 20px;}
/* VIEW_Table */
.frMiddle .frMdWrap.SubAtc .contView .tableGuide {font-size: 0.9rem; margin-top: 20px;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout {overflow: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
/* VIEW_Bottom */
.frMiddle .frMdWrap.SubAtc .contView .articleBoard .atcBrdTitle {font-size: 0.9rem;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard tr td {padding: 10px 0;/* font-size: 0.9rem;*/}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a {padding-right: 20px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a::after {padding-left: 20px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter {margin-top: 5px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc span[class^='title'] {/*font-size: 0.9rem; */margin-bottom: 10px; height: 2.6rem;}


/** BOARD : Thumbnail **/
.frMiddle .boardWrap.thumbnail .frMdWrap.brdtblWrap table tr td:first-child {padding-right: 20px;}

/** BOARD VIEW **/
.frMiddle .boardViewWrap .frMdWrap .date {font-size: 1.2rem;}
.frMiddle .boardViewWrap .frMdWrap .article {font-size: 1.1rem;}


/** MY PAGE **/
.frMiddle .MypageWrap {padding: 120px 0 50px;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel {min-height: unset; align-items: flex-start; padding: 50px 0; font-size: 1.3rem;}
/* input, select */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel input[type='checkbox'],
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel input[type='radio'] {width: 16px; height: 16px;}
/* MY PAGE_메뉴 */
.frMiddle .MypageWrap .mypageMenu {text-align: left; margin-bottom: 30px;}
/* MY PAGE_회원정보 */
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap {align-items: flex-start;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap div {display: inline-block; max-width: 290px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle {margin-top: 12px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle.subscribe {min-width: 240px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel input[type='text'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel input[type='password'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody select {height: 42px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .description {margin-top: 8px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .mailAgrr label {display: block;}

/* MY PAGE_관심정보 */
.frMiddle .MypageWrap .frMdWrap.memberInterest .dscrInterest {font-size: 1.1rem;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel {padding: 50px 0;}

/* MY PAGE_이전 읽은 글/담아둔 글 */
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap {font-size: 0.9rem;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt .substance {height: 60px;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt .subtxt {font-size: 0.9em;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave {width: 30px; height: 30px; background-size: 60%;
}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave.completed {background-size: 60%;}


/** JOIN **/
.frMiddle .joinWrap .frMdWrap label input[type='checkbox'],
.frMiddle .joinWrap .frMdWrap label input[type='radio'] {width: 17px; height: 17px; top: 3px;}
/* JOIN_회원가입단계 */
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep {font-size: 1.2rem; height: 70px; line-height: 70px;}
.frMiddle .joinWrap .frMdWrap .conclulsion {font-size: 2rem;}
/* JOIN_회원가입 단계별 디자인 변경 */
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep.completed:after {content: ""; display: inline-block; width: 30px; height: 36px; position: relative; top: 15px; right: -8px; background-image: url("../images/icon_completed.png"); background-size: contain; background-repeat: no-repeat;}
/* JOIN_약관이용 동의 */
.frMiddle .joinWrap .frMdWrap .joinClause {font-size: 1rem;}
.frMiddle .joinWrap .frMdWrap .joinClause dl {padding: 30px 30px;}
.frMiddle .joinWrap .frMdWrap .joinChek {font-size: 1.1rem;}
/* JOIN_회원정보 입력_기본정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation {font-size: 1.3rem;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate {width: 100%; height: auto; display: flex; justify-content: space-between; gap: 10%;}


/** LOGIN **/
.frMiddle .loginWrap {padding: 90px 0 50px;}
.frMiddle .loginWrap .frMdWrap {border: 0px solid #d4d4d4;}


/** FIND ID/PW **/
.frMiddle .findIdPwWrap .frMdWrap .description {font-size: 1.1rem;}
.frMiddle .findIdPwWrap .frMdWrap .subtitle {font-size: 1.6em;}
.frMiddle .findIdPwWrap .frMdWrap .label {font-size: 1.2rem;}


/** 이용약관/개인정보처리방침/이메일무단수집거부/서비스정책 **/
.frMiddle .frMdWrap.lotisRule .article {font-size: 1.1rem;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div {width: 32%; height: 220px;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img01"],
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img03"] {background-size: 40%;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img02"] {background-size: 30%;}



/** 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestContainer {font-size: 0.9rem;}
.frMiddle .interestContainer .interestWrap {padding: 30px 30px;}
.frMiddle .interestContainer .interestWrap .interestTb {display: none;}
.frMiddle .interestContainer .interestWrap .interestTb2 {display: table;}
.frMiddle .interestContainer .interestWrap .interestTb2 tr td {height: 90px;}
.frMiddle .interestContainer .btnclose {width: 18px; height: 18px;}


/*** BOTTOM FRAME ***/
/* BOTTOM FRAME_사이트정보/규약 */
.frBottom .information .infoList {display: inline}
.frBottom .information .infoList div::after{content: "|";}


/*** Aside : Cookie banner ***/
.ck_wrap .cookie {padding: 30px 30px;}
.ck_wrap .cookie .ckTxt {font-size: 1.0rem;}
.ck_wrap .cookie .btnWrap {padding-left: 50px;}
.ck_wrap .cookie .btnWrap button {font-size: 0.9rem;}

}


/* 모바일 */
@media only screen and (max-width:700px) {
/*** MIDDLE FRAME ***/
.frMiddle {font-size: 0.7rem;}
.frMiddle .title.t01 {font-size: 2.2rem;}
.frMiddle .title.t02 {font-size: 2.0rem;}
.frMiddle .title.t03 {font-size: 1.6rem;}
.frMiddle .title.t04 {font-size: 1.4rem;}
.frMiddle .title.t05 {font-size: 1.0rem;}
.frMiddle .title.t06 {font-size: 1.3rem;}


/** MIDDLE FRAME : MAIN **/
/* 메인 슬라이드 */
.frMiddle .mSlide {padding: 120px 0 50px;}
.frMiddle .mSlide .title {max-width: 600px; padding: 0 5%; box-sizing: border-box;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 350px;}


/* 카테고리 메뉴 */
.frMiddle .category {padding: 50px 2.5%;}
.frMiddle .category .title {word-break: keep-all;}
.frMiddle .category .ctMenuWrap {margin-top: 30px;}
.frMiddle .category .ctMenuWrap .ctMenu {margin: 0 0 12px;}
.frMiddle .category .ctMenuWrap .ctMenu button {width: 80px; height: 80px; border-radius: 22px;}
.frMiddle .category .ctMenuWrap .ctMenu span {font-size: 0.9rem;}
.frMiddle .category .ctMenuTypeWrap {margin-top: 30px;}
.frMiddle .category .ctMenuTypeWrap .ctMenu {margin: 0 0 12px;}
.frMiddle .category .ctMenuTypeWrap .ctMenu button {width: auto; height: 60px; padding: 0 20px; border-radius: 22px;}
.frMiddle .category .ctMenuTypeWrap .ctMenu span {display: none;}
/* 카테고리 메뉴 : 키워드 */
.frMiddle .category .hotKeyword {height: 135px;}
.frMiddle .category .hotKeyword .keyword {font-size: 0.9rem;}

/* 펼쳐진 컨텐츠 */
.frMiddle .frMdWrapMain {padding: 50px 5%;}
.frMiddle .frMdWrapMain .contContainer {margin: 30px auto 0; padding-bottom: 30px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt {font-size: 0.7rem; margin-top: 30px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtitle {height: 1.6rem;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .substance {height: 92px; font-size: 1.3em;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtxt {margin-top: 30px; font-size: 1.2em;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap {margin-top: 40px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap a {font-size: 1.2em;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnSave {padding-left: 24px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap .btnView {padding-left: 19px;}
/* 페이징 넘버 : 가로 1350px 이하 fold 없을 때 사용 */
.frMiddle .frMdWrapMain .pagingBtnWrap .btnNum {width: 40px; height: 40px; font-size: 0.9rem;}
.frMiddle .frMdWrapMain .pagingBtnWrap .btnMore {width: 100px; height: 40px; font-size: 0.9rem; line-height: 40px;}

/* MAIN_BOTTOM_이전읽은글, 담아둔글 */
.frMiddle .mainBottom .storage .storageWrap {display: block;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] {padding: 40px 0 30px 7%; box-sizing: border-box; background: transparent;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .title {font-size: 1.3rem;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .subtitle {font-size: 1rem;}
.frMiddle .mainBottom .storage .storageWrap .atcRead {border-bottom: 1px solid #777;}

/* MAIN_BOTTOM_관계기관 */
.frMiddle .mainBottom .cooperation {padding: 30px 2.5% 10px;}


/** MIDDLE INNER **/
.frMiddle .frMdWrap .mtitle {font-size: 2.6rem;}


/** NEWS **/
/* NEWS_카테고리 메뉴 */
.frMiddle .NewsWrap.NewsSort .title {word-break: keep-all;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap {max-width: unset;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu {margin: 0 0 12px;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu button {width: 80px; height: 80px; border-radius: 22px;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu span {font-size: 0.9rem;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap {max-width: unset;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu {margin: 0 0 12px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu button {width: auto; height: 40px; padding: 0 20px; border-radius: 22px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu span {display: none;}
/* NEWS_카테고리 메뉴 : 키워드 */
.frMiddle .NewsWrap.NewsSort .hotKeyword {max-width: unset; min-width: unset; height: 110px; margin: 30px auto 0; padding: 0 2.5%; box-sizing: border-box;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword {padding: 6px 10px; font-size: 0.9rem;}
/* NEWS_검색어 입력, 추가 조건 선택 */
.frMiddle .NewsWrap.news .serachwrap {display: inline-block;}
.frMiddle .NewsWrap.news .serachwrap .searchbar {width: 100%; padding: 7px 8px;}
.frMiddle .NewsWrap.news .serachwrap .searchbar input {padding-left: 5px; font-size: 0.9rem;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti {width: 100%; margin-top: 30px; justify-content: right;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label {align-items: center;  font-size: 0.9rem;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label input[type="checkbox"] {width: 18px; height: 18px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti select {width: auto; padding: 6px 25px 6px 15px; font-size: 0.75rem;}
/* NEWS_리스트 */
.frMiddle .NewsWrap.news {padding: 50px 0 100px;}
.frMiddle .NewsWrap.news .contentsWrap .contents img {height: 200px;}
.frMiddle .NewsWrap.news .contentsWrap {display: inline;}
.frMiddle .NewsWrap.news .contentsWrap .contents {width: 100%;}
.frMiddle .NewsWrap.news .contentsWrap .contents .subtxt {margin-top: 16px; font-size: 1.1em;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave {width: 30px; height: 30px; background-size: 70%;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave.completed {background-size: 70%;}
.frMiddle .NewsWrap.news .btnMore {font-size: 1.1em;}


/** VIEW **/
.frMiddle .frMdWrap.SubAtc .contView {font-size: 0.8rem;}
/* 매인타이틀, 작성자, 게시일 등 */
.frMiddle .frMdWrap.SubAtc .contView .titleWrap .subtxt {font-size: 1.3em;}
/* 본문글 */
/* 중복요소 */
.frMiddle .frMdWrap.SubAtc .contView .content {font-size: 1.2em;}
/* 이미지 */
.frMiddle .frMdWrap.SubAtc .contView .imgTitle {margin-top: 12px; font-size: 1.0em;}
.frMiddle .frMdWrap.SubAtc .contView .imgOrigin {margin-top: 8px; font-size: 1.0em;}
.frMiddle .frMdWrap.SubAtc .contView .warning {padding: 15px 20px; line-height: 180%;}
/* VIEW_Table */
.frMiddle .frMdWrap.SubAtc .contView .tableGuide {font-size: 0.8rem;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableNote {padding: 4px 0;}
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table th,
.frMiddle .frMdWrap.SubAtc .contView .tableGuide .tabelWrap .tableLayout table td {padding: 5px;}
/* VIEW_Bottom */
.frMiddle .frMdWrap.SubAtc .contView .articleBoard,
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter {width: 100%; min-width: unset;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard tr td {padding: 7px 0; font-size: 1.1em;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a {padding-right: 10px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoard a::after {padding-left: 10px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc {width: 180px;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter .writerWrap .writerArtc span[class^='title'] {margin-bottom: 10px; height: 2.6rem;}
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter button[class^='btnGoPrev'],
.frMiddle .frMdWrap.SubAtc .contView .articleBoardwriter button[class^='btnGoNext'] {width: 9px; height: 9px;}


/** TREND **/
/* TREND_메뉴 */
.frMiddle .trendWrap .frMdWrap.trendMenu .btnMore {font-size: 1rem; padding: 15px 50px;}
/* TREND_게시판 */
.frMiddle .trendWrap .frMdWrap.trendBoard {display: block; justify-content: unset; margin: 10px auto 50px;}
.frMiddle .trendWrap .frMdWrap.trendBoard .trdbrdWrap {width: 100%; height: auto; padding: 30px 30px; margin-right: 0; margin-bottom: 30px;}
.frMiddle .trendWrap .frMdWrap.trendBoard .trdbrdWrap:last-of-type {margin-bottom: 0;}
.frMiddle .trendWrap .frMdWrap.trendBoard .title {font-size: 1.2rem;}
.frMiddle .trendWrap .frMdWrap.trendBoard table tr td {padding: 15px 0; font-size: 1rem; line-height: 120%;}


/** BOARD **/
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td img {width: 50px; height: 70px;}
.frMiddle .boardWrap .frMdWrap.brdtblWrap table tr td a {height: 3rem; text-overflow: ellipsis; -webkit-line-clamp: 2; display : -webkit-box; -webkit-box-orient : vertical; overflow: hidden;}

/** BOARD VIEW **/
.frMiddle .boardViewWrap .frMdWrap .date {font-size: 1.1rem;}

/** BOARD VIEW : File Download **/
.frMiddle .boardViewWrap .filedownload .fileWrap .filename {font-size: 0.9rem;}
.frMiddle .boardViewWrap .filedownload .fileWrap a {font-size: 0.9rem;}

/** BOARD VIEW : Comment **/
.frMiddle .boardViewWrap .comment .commentWrite {font-size: 0.8rem;}
.frMiddle .boardViewWrap .comment .commentWrite div {max-width: unset; margin: 0 0 10px 0;}
.frMiddle .boardViewWrap .comment .commentWrite .stitle,
.frMiddle .boardViewWrap .comment .commentWrite .stitle2 {min-width: 60px;}
.frMiddle .boardViewWrap .comment .commentWrite select {font-size: 0.9em; margin-bottom: 3px;}
.frMiddle .boardViewWrap .comment .commentWrite .btn_register {font-size: 0.8em;}

.frMiddle .boardViewWrap .comment .commentList .cListInner {font-size: 0.8rem;}

/** MY PAGE **/
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel {align-items: center;}
/* button */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap {height: auto;}
/* MY PAGE_메뉴 */
/* MY PAGE_회원정보 */
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap {display: inline-block;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle {width: 100%; margin-top: 0; margin-bottom: 15px;}
/* MY PAGE_관심정보*/
.frMiddle .MypageWrap .frMdWrap.memberInterest .dscrInterest {font-size: 1rem;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .labelWrap {width: 65%;}

/* MY PAGE_이전 읽은 글/담아둔 글 */
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap {display: inline;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents {width: 100%;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .contTxt .subtxt {font-size: 1.1em;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave {width: 30px; height: 30px; background-size: 70%;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .mypageBody .contentsWrap .contents .btnSave.completed {background-size: 70%;}
.frMiddle .MypageWrap .frMdWrap.memberArtcList .pagingBtnWrap button {font-size: 1.1rem; margin: 0 3px;}


/** JOIN **/
.frMiddle .joinWrap .frMdWrap label {font-size: 0.9em;}
.frMiddle .joinWrap .frMdWrap label input[type='checkbox'],
.frMiddle .joinWrap .frMdWrap label input[type='radio'] {width: 15px; height: 15px; top: 2px; margin-right: 7px;}
.frMiddle .joinWrap .frMdWrap .title {margin-bottom: 10px;}
/* JOIN_회원가입단계 */
.frMiddle .joinWrap .frMdWrap .stepWrap {display: block; font-size: 1rem;}
.frMiddle .joinWrap .frMdWrap .stepWrap:last-of-type {display: none;}
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep {display: none; width: auto; height: auto; line-height: 100%;}
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep::before {content: "- ";}
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep.ongoing {border: 0px solid #4085D8; display: inline-block; color: #777;}
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep.completed {display: none;}
.dot {display: none;}
.dotB {display: none;}
/* JOIN_약관이용 동의 */
/* JOIN_회원정보 입력_기본정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation {max-width: 450px; font-size: 1.2rem; margin: 30px auto; text-align: center;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap {padding: 50px 0 0; margin-bottom: 70px; align-items: start; flex-direction: column; gap: 10px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate {width: 100%; height: auto; display: block; justify-content: unset; gap: unset;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate div {width: 100%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .separate .joinLabel {text-align: left;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnInptClose {width: 15px; height: 15px; top: -38px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnInptClose.short {top: 27px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnCheck {font-size: 0.8em;}
/* JOIN_회원정보 입력_관심정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation.sect2 .subtitWrap {width: 100%; height: auto; padding: 50px 0 0; margin-bottom: 70px; display: flex; justify-content: left; align-items: start; flex-direction: column; gap: 10px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation.sect2 .joinLabel {text-align: left;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .interestList {margin-top: 20px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .interestList span {font-size: 0.9em;}


/** LOGIN **/
.frMiddle .loginWrap {padding: 80px 0 30px;}
.frMiddle .loginWrap .frMdWrap .warning {max-width: 450px;}


/** FIND ID/PW **/
.frMiddle .findIdPwWrap .frMdWrap .title span {display: inline-block; margin-bottom: 0.2em;}
.frMiddle .findIdPwWrap .frMdWrap .description {font-size: 1.1rem; margin-top: 10px;}
.frMiddle .findIdPwWrap .frMdWrap .description .important {display: inline;}
.frMiddle .findIdPwWrap .frMdWrap .findWrap {display: block; justify-content: unset;}
.frMiddle .findIdPwWrap .frMdWrap .findWrap .findID {width: 100%;}
.frMiddle .findIdPwWrap .frMdWrap .findWrap .findPW {width: 100%; margin-top: 20px;}
.frMiddle .findIdPwWrap .frMdWrap button {margin-top: 30px;}


/** 이용약관/개인정보처리방침/이메일무단수집거부/서비스정책 **/
.frMiddle .frMdWrap.lotisRule .article {font-size: 1.1rem;}
.frMiddle .frMdWrap.lotisRule .purpose p {font-size: 1.0rem; margin-top: 70px;}
.frMiddle .frMdWrap.lotisRule .purpose p span {display: inline-block;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg {margin: 30px 0;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div {height: 200px; font-size: 1.0rem;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img01"],
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img03"] {background-size: 40%;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img02"] {background-position-y: 40px}


/** 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestContainer {font-size: 0.8rem;}
.frMiddle .interestContainer .btnSelected {margin: 0 8px 15px 0;}
.frMiddle .interestContainer .btnclose {width: 15px; height: 15px;}


/** NO PAGE **/
.frMiddle.nopage p {font-size: 2.0rem;}


/*** BOTTOM FRAME ***/
/* BOTTOM FRAME_사이트정보/규약 */
.frBottom .information .infoList div {margin-right: 10px;}
.frBottom .information .infoList div a,
.frBottom .information .infoList div span {font-size: 0.9rem; margin-right: 10px; display: inline-block;}
.frBottom .information .infoList button {font-size: 0.8rem; top: -2px;}
/* BOTTOM FRAME_사업장주소/연락처 */
.frBottom address .addressWrap {font-size: 0.9rem;}
/* BOTTOM FRAME_ASIDE : 관련사이트 팝업 */
.popupCoSite {top: 20%;}
.popupCoSite .popupCoSiteWrap a {width: 210px; height: 45px; font-size: 1.3rem; line-height: 45px;}


/*** Aside : Popup Banner ***/
/* 펼침 : click event */
.pb_wrap.unfold .popbanner {padding: 0 30px 30px;}
.pb_wrap.unfold .btnFold {width: 50px; margin: 0 0 0 10px; height: 55px; background: url("../images/btn_downMb.png") no-repeat 20px 12px;}
.pb_wrap.unfold .popbanner .btnWrap {margin-top: -45px;}
.pb_wrap.unfold .popbanner ul.list {width: 100%; height: 107px; overflow: hidden; margin-top: 10px; display: block; overflow: auto; white-space: initial; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
.pb_wrap.unfold .popbanner ul li {height: auto; overflow: hidden; list-style: none; text-overflow: ellipsis; -webkit-line-clamp: 1; display : -webkit-box; -webkit-box-orient : vertical; white-space: initial; padding-right: 20px;}
.pb_wrap.unfold .popbanner ul a {display: block; width: 100%; height: auto; margin-right: 0; overflow: hidden; padding: 12px 0 3px; margin-bottom: 3px; box-sizing: border-box; border-width:  0 0 1px 0; border-style: solid; border-color: #7c7c7c; border-radius: 0; font-size: 1rem; line-height: 110%; color: #fff; font-weight: 300; background: url("../images/btn_goNext2W.png") no-repeat right center;}
.pb_wrap.unfold .popbanner ul a:hover,
.pb_wrap.unfold .popbanner ul a.visited:hover {background: none;}
.pb_wrap.unfold .popbanner ul a.visited {border-width:  0 0 1px 0;}


/*** Aside : Cookie banner ***/
.ck_wrap .cookie {min-width: unset; height: auto; flex-direction: column; justify-content: start; padding: 20px 30px;}
.ck_wrap .cookie .btnWrap {width: 100%; padding-left: unset; padding-top: 20px; flex-direction: row; gap: 10px;}
.ck_wrap .cookie .btnWrap button {min-width: 50px;}

/*** Button, Cursor ***/
.btnMore, .btnT01, .btnT02 {font-size: 1.1rem;}
}

/* 모바일 */
@media only screen and (max-width:500px) {
/*** TOP FRAME ***/
/* Top Menu */
.mMenu .mMenuWrap .mMenuGuide .loginJoin a {font-size: 1rem;}
.mMenu .mMenuWrap .mMenuGuide .menuList ul {font-size: 1rem;}

/*** MIDDLE FRAME ***/
.frMiddle {font-size: 0.6rem;}
.frMiddle .title.t01 {font-size: 1.85rem;}
.frMiddle .title.t02 {font-size: 1.7rem;}
.frMiddle .title.t03 {font-size: 1.6rem;}
.frMiddle .title.t04 {font-size: 1.3rem;}
.frMiddle .title.t05 {font-size: 0.9rem;}
.frMiddle .title.t06 {font-size: 1.1rem;}


/** MIDDLE FRAME : MAIN **/
/* 메인 슬라이드 */
.frMiddle .mSlide .title {max-width: unset;}
.frMiddle .mSlide .rollerWrap {height: 320px;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 320px; font-size: 0.65rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .cntImg {height: 160px;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .substance {margin-top: 20px; font-size: 1.4em;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt {font-size: 1.3em;}
.frMiddle .mSlide .linkNews {margin-top: 60px;}
.frMiddle .mSlide .linkNews .btnMore {padding: 18px 38px; border-radius: 5px;}
.frMiddle .mSlide .linkNews .btnMore:hover {background: transparent; color: rgb(75, 75, 75); padding: 18px 38px; background: #fafafa;}

/* 카테고리 메뉴 */
.frMiddle .category .title {max-width: 320px;}
.frMiddle .category .ctMenuWrap {width: 100%; max-width: unset; text-align: left; margin: 20px auto; padding: 0 5%; box-sizing: border-box; font-size: 0;}
.frMiddle .category .ctMenuWrap .ctMenu {width: 32%; height: auto; padding: 0; border: 2px solid #EBEBEB; border-radius: 8px; margin: 0 2px 4px; background: #fff; text-align: center; gap: 0;}
.frMiddle .category .ctMenuWrap .ctMenu.selected,
.frMiddle .category .ctMenuWrap .ctMenu:active {border-color: #0085FF;}
.frMiddle .category .ctMenuWrap .ctMenu button {display: none;}
.frMiddle .category .ctMenuWrap .ctMenu span {word-break: break-all; display: inline-block; padding: 14px 0;}
.frMiddle .category .ctMenuTypeWrap {width: 100%; max-width: unset; text-align: left; margin: 20px auto; padding: 0 5%; box-sizing: border-box; font-size: 0;}
.frMiddle .category .ctMenuTypeWrap .ctMenu {width: 32%; height: auto; padding: 0; border: 2px solid #EBEBEB; border-radius: 8px; margin: 0 2px 4px; background: #fff; text-align: center; gap: 0;}
.frMiddle .category .ctMenuTypeWrap .ctMenu.selected,
.frMiddle .category .ctMenuTypeWrap .ctMenu:active {border-color: #0085FF;}
.frMiddle .category .ctMenuTypeWrap .ctMenu button {display: none;}
.frMiddle .category .ctMenuTypeWrap .ctMenu span {word-break: break-all; display: inline-block; padding: 14px 0;}
/* 카테고리 메뉴 : 키워드 */
.frMiddle .category .hotKeyword {height: 115px; margin-top: 20px; text-align: left; padding: 0 5%; box-sizing: border-box;}
.frMiddle .category .hotKeyword .title {margin-bottom: 10px; margin-left: 10px;}
.frMiddle .category .hotKeyword .keyword {padding: 8px 14px; margin: 0 4px 4px 0;}

/* 펼쳐진 컨텐츠 */
.frMiddle .frMdWrapMain .contContainer {margin: 20px auto 0; padding-bottom: 20px;}
.frMiddle .frMdWrapMain .contContainer .contents {padding: 15px 15px; font-size: 0.65rem;}
.frMiddle .frMdWrapMain .contContainer .contents img {height: 200px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt {margin-top: 20px;}

/* MAIN_BOTTOM_이전읽은글, 담아둔글 */
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] {padding: 25px 0 20px 7%;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .title {font-size: 1.1rem;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .subtitle {font-size: 0.9rem;}

/* MAIN_BOTTOM_관계기관 */
.frMiddle .mainBottom .cooperation {padding: 30px 2.5% 20px;}
.frMiddle .mainBottom .cooperation .cooperationList img {margin: 0 5px 10px 5px;}


/** MIDDLE INNER **/
.frMiddle .frMdWrap .mtitle {font-size: 2rem;}


/** NEWS **/
/* NEWS_카테고리 메뉴 */
.frMiddle .NewsWrap.NewsSort {padding: 120px 2.5% 30px; box-sizing: border-box;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap {width: 100%; max-width: unset; text-align: left; font-size: 0; margin-top: 30px;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu {width: 32%; height: auto; padding: 0; border: 2px solid #EBEBEB; border-radius: 8px; margin: 0 2px 4px; background-color: #fff; text-align: center; gap: 0;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu.selected,
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu:active {border-color: #0085FF;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu button {display: none;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu span {word-break: break-word; display: inline-block; padding: 14px 4px; height: 60px;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap {width: 100%; max-width: unset; text-align: left; font-size: 0;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu {width: 32%; height: auto; padding: 0; border: 2px solid #EBEBEB; border-radius: 8px; margin: 0 2px 4px; background-color: #fff; text-align: center; gap: 0;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu.selected,
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu:active {border-color: #0085FF;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu button {display: none;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu span {word-break: break-word; display: inline-block; padding: 4px; height: 54px; font-size: 0.9rem;}
/* NEWS_카테고리 메뉴 : 키워드 */
.frMiddle .NewsWrap.NewsSort .hotKeyword {padding: 0 0; height: 103px;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .title {margin-bottom: 10px; font-size: 1.1rem;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword {padding: 6px 10px; margin: 0 4px 4px 0; font-size: 0.9rem;}
/* NEWS_검색어 입력, 추가 조건 선택 */
.frMiddle .NewsWrap.news .serachwrap {display: inline-block;}
.frMiddle .NewsWrap.news .serachwrap .searchbar {width: 100%; min-width: unset; padding: 7px 8px;}
.frMiddle .NewsWrap.news .serachwrap .searchbar input {font-size: 0.8rem;}
.frMiddle .NewsWrap.news .serachwrap .searchbar .btnSearch {width: 15px; height: 15px; background-size: contain;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti {min-width: unset; gap: 10px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label {font-size: 0.85rem;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label input[type="checkbox"] {width: 17px; height: 17px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti select {width: auto; padding: 5px 25px 5px 10px; font-size: 0.7rem;}
/* NEWS_리스트 */
.frMiddle .NewsWrap.news .btnMore {padding: 16px 50px; font-size: 1.0em;}


/** TREND **/
/* TREND_메뉴 */
.frMiddle .trendWrap .frMdWrap.trendMenu .btnMore {font-size: 0.9rem; padding: 13px 35px;}
.frMiddle .trendWrap .frMdWrap.trendYear select {font-size: 0.8rem; font-weight: 700; padding: 5px 20px 5px 10px; border: 1px solid #555; appearance: none; background:url('../images/selectArrowTrend.png') no-repeat 90% 53%/9px auto;}
/* TREND_게시판 */
.frMiddle .trendWrap .frMdWrap.trendBoard .title {font-size: 1.1rem;}
.frMiddle .trendWrap .frMdWrap.trendBoard table tr td {font-size: 1rem;}


/** BOARD **/
.frMiddle .boardWrap .frMdWrap.brdtblWrap table {font-size: 0.9rem;}
.frMiddle .boardWrap .pagingBtnWrap button {font-size: 1.1rem; margin: 0 3px;}


/** BOARD VIEW : Comment **/
.frMiddle .boardViewWrap .comment .commentWrite .stitle2 {width: 100%;}

/** MY PAGE **/
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel {align-items: flex-start; padding: 30px 0; font-size: 1.1rem; gap:5px;}
/* input, select */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel input[type='checkbox'],
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel input[type='radio'] {width: 14px; height: 14px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel input[type='text'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel input[type='password'],
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody select {width: 100%; min-width: 180px; max-width: 200px; height: 38px;}
/* button */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap {margin-top: 29px;}
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap button {font-size: 0.7em;}
/* MY PAGE_메뉴 */
.frMiddle .MypageWrap .mypageMenu {font-size: 1.1rem;}
/* MY PAGE_회원정보 */
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle {width: 100%; margin-bottom: 10px;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle.subscribe {min-width: unset;}
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .mailAgrr {min-height: 30px; line-height: 30px;}
/* MY PAGE_관심정보 */
.frMiddle .MypageWrap .frMdWrap.memberInterest .dscrInterest {font-size: 0.9rem;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel {padding: 30px 0;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .btnWrap {margin-top: 0;}


/** JOIN **/
/* JOIN_회원가입단계 */
.frMiddle .joinWrap .frMdWrap .conclulsion {font-size: 1.5rem; margin: 100px 0 50px;}
/* JOIN_버튼 */
.frMiddle .joinWrap .frMdWrap .bttnWrap button {padding: 18px 40px;}
/* JOIN_회원정보 입력_기본정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .title {font-size: 1.2em;}


/** LOGIN **/
.frMiddle .loginWrap {padding: 70px 5% 20px; box-sizing: border-box;}
.frMiddle .loginWrap .frMdWrap .loginLabel {font-size: 1.2rem;}
.frMiddle .loginWrap .frMdWrap .loginChek {font-size: 1.2rem;}
.frMiddle .loginWrap .frMdWrap .loginChek input[type='checkbox'] {width: 18px; height: 18px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap {margin-top: 50px;}
.frMiddle .loginWrap .frMdWrap .warning {font-size: 0.9rem;}

/** FIND ID/PW **/
.frMiddle .findIdPwWrap .frMdWrap button {width: 150px;}

/** 이용약관/개인정보처리방침/이메일무단수집거부/서비스정책 **/
.frMiddle .frMdWrap.lotisRule .article {font-size: 1rem;}
.frMiddle .frMdWrap.lotisRule .purpose {text-align: left;}
.frMiddle .frMdWrap.lotisRule .purpose p span {display: inline;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg {width: 100%; height: auto; display: flex; flex-direction: column; gap: 10px; margin: 50px 0;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div {width: 100%; height: 150px; display: flex; flex-direction: row; align-items: center; gap: 20px; justify-content: unset;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img01"],
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img03"] {background-position: 40px center; background-size: 20%; padding-left: 50%;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img02"] {background-position: 45px center; background-size: 15%; padding-left: 50%;}


/** 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestContainer .interestWrap {padding: 10px 10px;}


/*** BOTTOM FRAME ***/
/* BOTTOM FRAME_사이트정보/규약 */
.frBottom .information .infoList div a,
.frBottom .information .infoList div span {font-size: 0.8rem;}
.frBottom .information .infoList button {font-size: 0.7rem; top: -1px;}
/* BOTTOM FRAME_사업장주소/연락처 */
.frBottom address .addressWrap {font-size: 0.8rem;}
/* BOTTOM FRAME_ASIDE : 관련사이트 팝업 */
.popupCoSite .popupCoSiteWrap {width: 70%;}
.popupCoSite .popupCoSiteWrap a {width: 210px; height: 35px; font-size: 1.1rem; line-height: 35px;}


/*** Aside : Popup Banner ***/
/* 접힘 */
.pb_wrap .popbanner {min-width: unset;}
.pb_wrap .popbanner .btnWrap {display: none;}

/* 펼침 : click event */
.pb_wrap.unfold .popbanner {min-width: unset;}


/*** Button, Cursor ***/
.btnMore, .btnT01, .btnT02 {font-size: 0.9rem; padding: 18px 50px;}

.frWriterWrap {
  padding: 80px 2.5% 30px !important;
  box-sizing: border-box;
}
}


/* 모바일 */
@media only screen and (max-width:320px) {
/*** TOP FRAME ***/
/* Top Menu */
.frTop .tnav .topMenu .tmLeft .mLogo {width: 80px; margin-left: -40px;}


/*** MIDDLE FRAME ***/
.frMiddle {font-size: 0.45rem;}
.frMiddle .title.t01 {font-size: 1.5rem;}
.frMiddle .title.t02 {font-size: 1.3rem;}
.frMiddle .title.t03 {font-size: 1.2rem;}
.frMiddle .title.t04 {font-size: 1.0rem;}
.frMiddle .title.t05 {font-size: 0.8rem;}
.frMiddle .title.t06 {font-size: 1.1rem;}


/** MIDDLE FRAME : MAIN **/
/* 메인 슬라이드 */
.frMiddle .mSlide .rollerWrap {height: 280px;}
.frMiddle .mSlide .rollerWrap .roller .contents {width: 240px;}
.frMiddle .mSlide .rollerWrap .roller .contents .cntImg {height: 140px;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .title {font-size: 1rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .substance {height: 3.2em; font-size: 0.8rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt {font-size: 0.8rem;}
.frMiddle .mSlide .rollerWrap .roller .contents .contTxt .subtxt a.btn_more {font-size: 0.85em;}
.frMiddle .mSlide .linkNews .btnMore {padding: 16px 28px; border-radius: 5px; font-size: 0.8rem;}
.frMiddle .mSlide .linkNews .btnMore:hover {padding: 16px 28px;}

/* 카테고리 메뉴 */
.frMiddle .category .title {max-width: 220px; padding: 0 5%; box-sizing: border-box;}
.frMiddle .category .ctMenuWrap {min-width: unset; margin: 10px auto;}
.frMiddle .category .ctMenuWrap .ctMenu {width: 31.5%;}
.frMiddle .category .ctMenuWrap .ctMenu span {font-size: 0.7rem;}
.frMiddle .category .ctMenuTypeWrap {min-width: unset; margin: 10px auto;}
.frMiddle .category .ctMenuTypeWrap .ctMenu {width: 31.5%;}
.frMiddle .category .ctMenuTypeWrap .ctMenu span {font-size: 0.7rem;}
/* 카테고리 메뉴 : 키워드 */
.frMiddle .category .hotKeyword {height: 100px;}
.frMiddle .category .hotKeyword .title {margin-left: 0;}
.frMiddle .category .hotKeyword .keyword {padding: 7px 12px; font-size: 0.7rem;}

/* 펼쳐진 컨텐츠 */
.frMiddle .frMdWrapMain .title {font-size: 1.3rem;}
.frMiddle .frMdWrapMain .contContainer {margin: 10px auto 0; padding-bottom: 20px;}
.frMiddle .frMdWrapMain .contContainer .contents {min-width: unset; padding: 10px 10px;}
.frMiddle .frMdWrapMain .contContainer .contents img {height: 150px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtitle {font-size: 1rem; height: 1.1rem;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .substance {font-size: 0.8rem; height: 5.2rem;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .subtxt {font-size: 0.8rem; margin-top: 20px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap {margin-top: 30px;}
.frMiddle .frMdWrapMain .contContainer .contents .contTxt .bttnWrap a {font-size: 0.8rem;}
/* 페이징 넘버 : 가로 1350px 이하 fold 없을 때 사용 */
.frMiddle .frMdWrapMain .pagingBtnWrap .btnNum {width: 30px; height: 30px; font-size: 0.8rem;}
.frMiddle .frMdWrapMain .pagingBtnWrap .btnMore {width: 80px; height: 30px; font-size: 0.8rem; line-height: 30px;}


/* MAIN_BOTTOM_이전읽은글, 담아둔글 */
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] {padding: 20px 7% 16px 7%;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .title {font-size: 0.9rem;}
.frMiddle .mainBottom .storage .storageWrap div[class^='atc'] .subtitle {font-size: 0.8rem;}

/* MAIN_BOTTOM_관계기관 */
.frMiddle .mainBottom .cooperation {padding: 30px 0 20px 0;}
.frMiddle .mainBottom .cooperation .cooperationList img {width: 110px;}


/** NEWS **/
/* NEWS_카테고리 메뉴 */
.frMiddle .NewsWrap.NewsSort {font-size: 0.6rem;}
.frMiddle .NewsWrap.NewsSort .title {font-size: 2.4em;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu {width: 30%;}
.frMiddle .NewsWrap.NewsSort .ctMenuWrap .ctMenu span {font-size: 0.7rem;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu {width: 30%;}
.frMiddle .NewsWrap.NewsSort .ctMenuTypeWrap .ctMenu span {font-size: 0.7rem;}
/* NEWS_카테고리 메뉴 : 키워드 */
.frMiddle .NewsWrap.NewsSort .hotKeyword {margin-top: 20px; height: 95px;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .title {font-size: 1.0rem;}
.frMiddle .NewsWrap.NewsSort .hotKeyword .keyword {font-size: 0.7rem;}
/* NEWS_검색어 입력, 추가 조건 선택 */
.frMiddle .NewsWrap.news .serachwrap .searchbar {padding: 5px 6px;}
.frMiddle .NewsWrap.news .serachwrap .searchbar input {font-size: 0.7rem;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti {display: inline-block; margin-top: 15px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label {font-size: 0.8rem; width: 130px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti label input[type="checkbox"] {width: 16px; height: 16px;}
.frMiddle .NewsWrap.news .serachwrap .searchMulti select {width: auto; padding: 5px 25px 5px 10px; font-size: 0.7rem; float: right; position: relative; top: -45px;}
/* NEWS_리스트 */
.frMiddle .NewsWrap.news {font-size: 0.8rem;}
.frMiddle .NewsWrap.news .contentsWrap .contents .contTxt .substance {height: 52px;}
.frMiddle .NewsWrap .NewsWrap.news .btnMore {padding: 15px 50px;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave {width: 25px; height: 25px; background-size: 70%;}
.frMiddle .NewsWrap.news .contentsWrap .contents .btnSave.completed {background-size: 70%;}


/** VIEW **/
.frMiddle .frMdWrap.SubAtc {padding: 100px 5% 50px;}
/* 매인타이틀, 작성자, 게시일 등 */
/* 중복요소 */
.frMiddle .frMdWrap.SubAtc .contView .content {font-size: 1.1em;}
/* VIEW_Bottom */


/** TREND **/
/* TREND_메뉴 */
.frMiddle .trendWrap .frMdWrap.trendMenu .btnMore {padding: 10px 20px;}


/** MY PAGE **/
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel {flex-direction: column-reverse;}
/* button */
.frMiddle .MypageWrap .frMdWrap .mypageBody .mypageLabel .btnWrap {margin-top: 0;}
/* MY PAGE_회원정보*/
.frMiddle .MypageWrap .frMdWrap.memberInfo .mypageBody .mypageLabel .labelWrap .subtitle {width: 100%; margin-top: 20px; margin-bottom: 10px;}
/* MY PAGE_관심정보 */
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .subtitle {margin-top: 20px;}
.frMiddle .MypageWrap .frMdWrap.memberInterest .mypageBody .mypageLabel .labelWrap {width: 100%;}


/** JOIN **/
/* JOIN_약관이용 동의 */
.frMiddle .joinWrap .frMdWrap .joinClause,
.frMiddle .joinWrap .frMdWrap .joinChek {font-size: 0.9rem;}
.frMiddle .joinWrap .frMdWrap .joinClause dl {padding: 20px 20px;}
/* JOIN_회원가입단계 */
.frMiddle .joinWrap .frMdWrap .stepWrap .joinStep {font-size: 1rem;}
.frMiddle .joinWrap .frMdWrap .conclulsion {font-size: 1.2rem;}
/* JOIN_버튼 */
.frMiddle .joinWrap .frMdWrap .bttnWrap button {padding: 16px 30px;}
/* JOIN_회원정보 입력_기본정보 */
.frMiddle .joinWrap .frMdWrap .joinInfomation {font-size: 1rem;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .title {font-size: 1em;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .subtitWrap .btnMemberCheck { justify-content: left; gap: 0; align-items: start; flex-direction: column; font-size: 1rem;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel {height: 120px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel input[type='text'],
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel input[type='password'],
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel select,
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnCheck
{height: 40px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnInptClose {width: 12px; height: 12px; top: -32px;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .btnInptClose.short {top: 23px; left: -31%;}
.frMiddle .joinWrap .frMdWrap .joinInfomation .joinLabel .mailAgrr label {display: block;}


/** LOGIN **/
.frMiddle .loginWrap {padding: 70px 1.5% 20px;}
.frMiddle .loginWrap .frMdWrap .bttnWrap.iconLogin {gap: 5px;}


/** 이용약관/개인정보처리방침/이메일무단수집거부/서비스정책 **/
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div {height: 120px; font-size: 0.9rem;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img01"],
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img03"] {background-position: 40px center; background-size: 20%; padding-left: 50%;}
.frMiddle .frMdWrap.lotisRule .purpose .lotisImg div[class="img02"] {background-position: 45px center; background-size: 15%; padding-left: 50%;}


/** 선택된 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestList span {font-size: 0.8rem;}
/** 관심키워드 : JOIN, MY PAGE **/
.frMiddle .interestContainer {top: 100px; font-size: 0.7rem;}
.frMiddle .interestContainer .btnSelected {margin: 0 6px 15px 0; font-size: 1.5em;}
.frMiddle .interestContainer .btnclose {width: 13px; height: 13px;}
.frMiddle .interestContainer .interestWrap .interestTb2 tr td {height: 50px;}


/*** BOTTOM FRAME ***/
/* BOTTOM FRAME_사이트정보/규약 */
/* BOTTOM FRAME_사업장주소/연락처 */
.frBottom address .addressWrap {font-size: 0.8rem;}
/* BOTTOM FRAME_ASIDE : 관련사이트 팝업 */
.popupCoSite .popupCoSiteWrap {width: 80%;}
.popupCoSite .popupCoSiteWrap a {width: 180px; height: 35px; font-size: 1.1rem; line-height: 35px;}


/*** Button, Cursor ***/
.btnMore, .btnT01, .btnT02 {padding: 16px 40px;}
}

/*** Writer ***/
#wrap {
  margin:0 auto 50px;
  max-width:1100px;
}
.frWriterWrap h1 {
  font-weight: 500;
  color: #2a2a2a;
  font-size: 18px;
  padding: 15px 0;
  /*margin: 25px 0;*/
  border-bottom: 1px solid #2a2a2a;
}
.frWriterWrap {
  width: 100%;
  height: auto;
  padding: 120px 0 30px;
  box-sizing: border-box;
  text-align: left;
  color: #c2c2c2;
}
.t_board{
  width:100%;
  position:relative;
  margin-top: 10px;
}
.t_board ul.tab{
  width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
}

.t_board ul.tab li a {
  display: block;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
  background-color: #fff;
  width: 120px;
  height: 28px;
  line-height: 26px;
  font-size: 15px;
  color: #070707;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
  transition: all 0.3s;
  overflow: hidden;
}

.t_board ul.tab li.active a{
  font-weight:700;
  background-color: #585858;
  color:#fff;
}
.t_board div.tab_contents{
  display:none;
  margin-top: 75px;
}
.t_board div.tab_contents.active{
  display:block;
}
ul.person_profil {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}
ul.person_profil > li{
  height: 260px;
  width: 224px;
  background-color: #f4f4f4;
  border-radius: 6px;
}
ul.person_profil > li a{
  width: 100%;
  height: 100%;
  display: block;
  padding: 20px;
}
ul.person_profil > li a img{
  display: block;
  margin: 0 auto 15px;
}
ul.person_profil > li a div{
  display: block;
  text-align: center;
  margin: 0 auto;
  color: #333;
}
ul.person_profil > li a div p {
  position: relative;
  margin-bottom: 10px;
}
ul.person_profil > li a div p:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #000000;

}
ul.person_profil > li a div p small {
  font-size: smaller;
}
ul.person_profil > li a div span {
  display: block;
}

/* .c-about-people-card__profile--wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.c-about-people-card__profile--image {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
} */

ul.person_name {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}
ul.person_name > li{
  height: 20px;
  width: 100%;
  text-align: center;
}
ul.person_name > li a{
  width: 100%;
  text-align: center;
  position: relative;
}
ul.person_name > li > a::after {
  content: '';
  display: block;
  border-right: 3px solid #d9d9d9;
  position: absolute;
  bottom: 4px;
  left: 60px;
  height: 10px;
}
/* 프로필 정보보 */
.name-list, .profile {
  /*display: none;*/
  margin-top: 10px;
}
.year-list{
  max-width: 1100px;
  margin: 30px auto 10px;
}
.name-list.active, .profile.active {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}
.name-list button {
  margin: 3px;
  padding: 6px 12px;
  cursor: pointer;
}
/* 연도 디테일 */
.year-list button {
  margin-right: 20px;
  cursor: pointer;
  background-color: #fff;
  display: inline-block;
  width: 120px;
  height: 28px;
  line-height: 26px;
  font-size: 15px;
  color: #070707;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
  transition: all 0.3s;
  overflow: hidden;
}
.year-list button:hover {
  background-color:#585858;
  border: 1px solid #2a2a2a;
  color: #fff;
}
/* 이름 디테일 */
.name-list button {
  background-color: transparent;
  position: relative;
  border: transparent;
  font-size: 14px;
}
.name-list button:after {
  content: '';
  position: absolute;
  bottom: 9px;
  right: -4px;
  width: 3px;
  height: 12px;
  background-color: #d9d9d9;
}
.name-list button:hover {
  text-decoration: underline;

}
.year-list button.active {
  font-weight: 700;
  background-color: #585858;
  color: #fff;
}
.name-list button.active {
  font-weight: 700;
  text-decoration: underline;
}
#profiles{
  max-width: 1100px;
  margin:0 auto;
  color: #333;
}
.profile-wrap {
  max-width: 1100px;
  background: #f4f4f4;
  border-radius: 8px;
  margin-bottom: 100px;
}
.profile-row-flex {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 10px;
  padding-top: 30px;
}
.profil{
  margin: 0 auto;
  align-content: end;
}
.profil_des {
  display: grid;
  grid-template-columns: 43% 57%;
  padding-left: 30px;
}
.profil_img img {
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  width: 160px; height: 160px;
  border-radius: 50%;
  object-fit: cover;
}
.profil_con {
  align-content: end;
  position: relative;
}
.profil_con ul {
  display: grid;
  grid-template-columns: 18% 38% 44%;
  gap: 6px;
  align-items: end;
}
.profil_con ul li {
  align-content: end;
}
.profil_con ul li img {
  vertical-align: 0;
}
.profil_con ul li p {
  margin-bottom: 21px;
}
.profil_con ul li p:last-child{
  margin-bottom: 0;
}
.experience {
  grid-area:1/2/3/3;
  align-content: end;
  position: relative;
}
.experience div {
  display: grid;
  grid-template-columns: 15% 85%;
  align-items: end;
}
.experience ul li {
  margin-bottom: 21px;
}
.experience ul li:last-child {
  margin-bottom: 0;
}

.experience h3 {
  margin-bottom: 18px;
  font-size: 18px;
}
.experience h3 small {
  font-size: 0.8em;
  color: #888;
}
.experience h2 {
  margin: 16px 0 10px 0;
  font-size: 14px;
  color: #706D6D;
  position: absolute;
  top:105px;
  left: 22%;
}
.profil_con h2 {
  text-align: center;
  font-size: 14px;
  color: #706D6D;
  position: absolute;
  top:55px;
  left: 30%;
}
.profil_con ul {
  display: grid;
  grid-template-columns: 20% 40% 40%;
  gap: 6px;
  align-items: end;
}
.tab-image-row {
  display: grid;
  grid-template-columns: 50% 50%;
}
.tab-img-card {
  height: 420px;
  width: 240px;
  border-radius: 6px;
  background: #ededed;
  padding: 0;
  overflow: hidden;
  min-width: 170px;
  cursor: pointer;
  transition: border 0.2s;
  position: relative;
}
.tab-img-card.active {
  box-shadow: 0 0px 10px rgba(39, 39, 39, 0.3);  }
.tab-img-top-text {
  width: 100%;
  background: #d9d9d952;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
.tab-img-main {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.tab-img-bottom-text {
  /* position: absolute;
  bottom: 120px; */
  background-color: #000000;
  width: 100%;
  opacity: 0.8;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  min-height: 50px;
  line-height: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
  align-content: center;
}
/* 슬라이드 */
.slide-area-container {
  margin-top: 44px;
}
.slide-area-container {
  position: relative;
  width: 100%;
  min-height: 610px; }
.slide-area {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 610px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: transparent;
  padding: 40px ;
}
.slide-area.active { display: block; }
.slide-area-bg {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 0;
  background: #e6e6e6;
  filter: blur(14px);
  opacity: 0.7;
  transition: background-image 0.3s;
}
.slider {
  position: relative;
  z-index: 1;
  width: 420px;
  height: 518px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  position: absolute;
  left: 0; top: 0;
  transition: opacity 0.5s cubic-bezier(.55,1.6,.59,1);
}
.slide-img.active {
  display: block;
  opacity: 1;
  z-index: 1;
}
.slide-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  position: relative;
  z-index: 20;
}
/* 버튼을 이미지 바깥 좌우로 */
.slide-controls {
  position: absolute;
  top: 50%;
  width: 130%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* 버튼만 클릭 가능하게 */
  z-index: 10;
  height: 0;
  transform: translateY(-50%);
}
/* 버튼 자체는 클릭 가능하게 */
.slide-controls button {
  pointer-events: auto;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 0;
  position: relative;
}
.slide-controls button.prev-btn::after,
.slide-controls button.next-btn::after
{
  content: '';
  display: block;
  background: url(../images/writer/prev.png) no-repeat;
  width: 9px;
  height: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.slide-controls button.next-btn::after {
  background: url(../images/writer/next.png) no-repeat;
}

.slide-controls button:hover {
  background: #0077cc;
  color: #fff;
}

/* .slide-indicator {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #555;
  position: relative;
  z-index: 20;
} */
.slide-desc-box {
  position: absolute;
  left: 50%;
  bottom: -70px;
  transform: translateX(-50%) translateY(40px);
  min-width: 380px;
  max-width: 90%;
  background: #fff;
  color: #222;
  font-size: 1.05em;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.45s cubic-bezier(.55,1.6,.59,1);
  z-index: 10;
  text-align: center;
  word-break: keep-all;
}
.slide-desc-box.show {
  opacity: 1;
  bottom: 16px;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* @media (max-width: 1100px) {
  .profile-wrap { padding: 18px 8px 28px 8px; }
  .profile-row-flex { flex-direction: column; gap: 24px; }
  .slider { width: 100%; }
  .tab-image-side { flex-direction: row; gap: 24px; }
  .tab-image-row { flex-direction: row; }
} */
@media (min-width: 360px) and (max-width: 767px) {
  #wrap {
    padding: 0 15px;
  }
  .frWriterWrap h1 {
    font-size: 0.9rem;
    padding-bottom: 8px;
  }
  .t_board ul.tab {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: center;
  }
  .t_board ul.tab li {
    width: 100%;
  }
  .t_board ul.tab li a {
    display: block;
    cursor: pointer;
    background-color: #fff;
    width: 100%;
    height: 28px;
  }
  .t_board div.tab_contents{
    margin-top: 25px;
  }
  ul.person_profil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  ul.person_profil > li{
    height: 260px;
    width: 100%;
    background-color: #f4f4f4;
    border-radius: 6px;
  }
  ul.person_profil > li a{
    width: 100%;
    height: 100%;
    display: block;
    padding: 20px;
  }
  ul.person_profil > li a img{
    display: block;
    margin: 0 auto 15px;
  }
  ul.person_profil > li a div{
    display: block;
    text-align: center;
    margin: 0 auto;


  }
  ul.person_profil > li a div p {
    position: relative;
    margin-bottom: 10px;
  }
  ul.person_profil > li a div p:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: #000000;
  }
  ul.person_profil > li a div span {
    display: block;
  }

  /* .c-about-people-card__profile--wrap {
      aspect-ratio: 1 / 1;
      width: 100%;
  }
  .c-about-people-card__profile--image {
      display: block;
      -o-object-fit: cover;
      object-fit: cover;
      width: 100%;
      height: 100%;
  } */

  ul.person_name {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
  }
  ul.person_name > li{
    height: 20px;
    width: 100%;
    text-align: center;
  }
  ul.person_name > li a{
    width: 100%;
    text-align: center;
    position: relative;
  }
  ul.person_name > li > a::after {
    content: '';
    display: block;
    border-right: 3px solid #d9d9d9;
    position: absolute;
    bottom: 4px;
    left: 60px;
    height: 10px;
  }






  .year-list{
    padding: 10px 10px 0 10px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
  }
  .name-list.active, .profile.active {
    max-width: 100%;
  }
  .name-list button {
    margin: 3px;
    padding: 6px 12px;
    cursor: pointer;
  }
  /* 연도 디테일 */
  .year-list button {
    justify-items: center;
    display: block;
    width: 95%;
    height: 28px;
    margin-right: 0;
  }
  .year-list button {
    margin-bottom: 10px;
  }
  #profiles {
    margin: 15px;
    overflow: hidden;
  }
  .profile-row-flex {
    grid-template-columns: 100%;
    padding-top: 15px;
    gap: 30px;
  }
  .profil_des {
    padding: 15px 0 0 0;
    grid-template-columns: 45% 55%;
  }
  .profil_img img {
    width: 95%;
    height: 95%;
  }
  .profil_con ul li p {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }
  .experience ul li {
    margin-bottom: 5px;
    font-size: 0.8rem;
  }
  .profil_con {
    padding: 20px 0 0 5%;
  }
  .profil_con ul {
    grid-template-columns: 57% 43%;
  }
  .experience div {
    justify-items:start;
    grid-template-columns: 100%
  }
  .experience div ul li {
    list-style: circle;
  }
  .experience div > img {
    display: none;
  }
  .profil_con ul li:first-child {
    display: none;
  }
  .profil_con ul li:nth-child(2) p {
    padding-left: 15px;
  }
  .profil_con ul li:last-child {
    justify-items: start;
  }
  .experience h2 {
    position: static;
  }
  .experience h3 {
    display: block;
  }
  .profil_con h2 {
    display: block;
    position: static;
    margin: 10px;
    text-align: left;
  }
  .tab-img-card {
    min-width: 95%; width: 95%;
    height: 300px;
    justify-items: center;
    margin: 0 auto;
  }
  .tab-image-row {
    width: 100%;
    margin: 0 auto;
  }
  .tab-image-side {
    padding: 0 10px;
    justify-items: center;
  }
  .slider, .slide-area, .slide-area-container {
    width: 100% !important;
    min-width: 0;
  }
  .slide-area, .slide-area-container {
    min-height: 578px;
    height: 578px; }
  .slider {
    position: relative;
    z-index: 1;
    width: 50%;
    height: 518px;
  }
  .slide-area {
    padding: 30px 50px;
  }
  .slide-controls {
    width: 118%;
  }
  .slide-controls button {
    width: 22px;
    height: 22px;
  }

  .slide-controls button.prev-btn::after,
  .slide-controls button.next-btn::after {
    width: 70%;
    height: 70%;
    left: 65%;
  }
  .slide-controls button.prev-btn::after {
    left: 55%;
  }
}