html, body {font-family:  Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif, arial; -webkit-text-size-adjust: 100%;}
a{text-decoration:none;}
html{overflow-y: scroll; overflow-x: hidden;}
.hide{display:none;}
.left{text-align:left !important;}
.center{text-align:center !important;}
input {font-family: Pretendard;}
.bx-wrapper{margin:0 auto;} 
.bx-wrapper .bx-viewport{border:none; left:0px; box-shadow:none;}
.bx-wrapper .bx-pager.bx-default-pager a {	background-color:transparent; border:1px solid #fff;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {background: #fff;}
*{color:#1d1d1d;}
.clearB:after {content: ''; display: block; clear: both;}
.textOF, .textOF b, u.textOF2 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.textOF2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.7rem;}
.webkit-box { display: -webkit-box;}
footer {margin-top: 240px;}



/*풋터 접근성마크*/

.opacity {opacity: 0; height: 65px;}



/*pc_main*/
.main_banner {background:#e3edf7 url('/images/uce/mch/main/main.png') no-repeat 50% 20%;}

.bannerwrap, .content1, .content2 {max-width:1280px; margin:80px auto;}
.bannerwrap {margin-top:0; display: grid; grid-template-columns: 3fr 1fr; grid-column-gap: 40px;}



.bannerwrap .textsearch {float:left; padding-top: 70px;}
.bannerwrap .textsearch>li:first-child {font-size:1.7rem; font-weight: bold; line-height:4rem; text-shadow: 5px 5px 10px rgb(22, 22, 22, 0.2);}
.bannerwrap .textsearch li:first-child p {font-size: 4.3rem;}
.bannerwrap .textsearch li .bar {display: inline-block; background-color: #000; width: 12%; height: 3px; vertical-align: middle; margin-left: 20px;}

.bannerwrap .textsearch li.lisearch {width: 86%;}
.bannerwrap .textsearch .header-search {
    border: 5px solid transparent;
    background-image: linear-gradient(#e4edf7,#e4edf7), linear-gradient(to right, #55abff 0%, #3191f8 29%, #006bd9 67%, #004283 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    margin: 46px 0 0;
    display: grid;
    grid-template-columns: 0.3fr 0.3fr 4fr 0.8fr; 
    white-space: nowrap;
}

.bannerwrap .textsearch .header-search input[type="radio"] {margin:0 6px 0 20px; } 
.bannerwrap .textsearch .header-search input[type="text"] {display: inline-block; border:none; border-left: 2px solid #555; margin:16px 0 8px 16px; padding:0 20px; font-size: 1rem; background-color:transparent; height: 32px; vertical-align: middle;}
.bannerwrap .textsearch .header-search .search-radio {margin:7px 0 6px; padding: 6px 0 4px;}
 
.bannerwrap .textsearch .header-search .searchBtn { border:none; background:none; cursor: pointer; vertical-align: middle; float:right; }

.bannerwrap .textsearch .searchWord {margin: 20px 0 36px; line-height:1.6rem;} 
.bannerwrap .textsearch .searchWord li {float: left; margin-left:30px;} 
.bannerwrap .textsearch .searchWord li:first-child {font-weight: bold; margin-left:0; border-bottom: 1px solid #000; padding-bottom: 2px; text-shadow: 5px 5px 10px rgb(22, 22, 22, 0.2);}




.bannerwrap .loginBox {float:right; height: 450px; box-sizing: border-box; background: linear-gradient(to bottom, #fff 0%,#fff 74%,#c7e3ff 74%,#c7e3ff 100%); margin:70px 0; border-radius: 30px; box-shadow: 3px 3px 10px rgb(22, 28, 98, 0.1); padding:30px; }

.bannerwrap .loginBox>p {font-size: 1.4rem; font-weight: bold; text-align: center; margin:36px 0 22px;}

.bannerwrap .loginBox input {width:100%; border-radius: 30px; border:1px solid #c6c6c6; margin-bottom:8px; padding:12px 20px; box-sizing: border-box;}



.bannerwrap .loginBox input:focus {border:2px solid #0074e5;}


.bannerwrap .loginBox input:focus::-webkit-input-placeholder {color: #0074e5;}
.bannerwrap .loginBox input:focus::-moz-placeholder {color: #0074e5;}
.bannerwrap .loginBox input:focus:-ms-input-placeholder {color: #0074e5;}
.bannerwrap .loginBox input:focus::-ms-input-placeholder {color: #0074e5;}


.bannerwrap .loginBox .loginButton {display: inline-block; padding: 18px 50px; border-radius: 30px; background: #0074e5; color:#fff; box-shadow: 3px 3px 10px rgba(60, 81, 216, 0.2); font-size: 0.9rem; margin-bottom:30px;}



.bannerwrap .loginBox .joinButton {margin-bottom: 54px;}
.bannerwrap .loginBox .joinButton a {display: inline-block; text-align: center; border-right: 1px solid #e8e8e8; padding:0 14px; font-size:0.9rem;}

.bannerwrap .loginBox .joinButton a:last-child {border-right: 0;}



.bannerwrap .loginBox .loginBajo {display: grid; grid-template-columns: repeat(2, 1fr); grid-row-gap:16px; grid-column-gap:20px;  font-size: 0.9rem; margin: 0 auto; width: 306px;}
.bannerwrap .loginBox .loginBajo a:hover {color:#00407f;}
/*.svg-image {
    transition: filter 0.3s ease;
}*/
.bannerwrap .loginBox .loginBajo a:hover .svg-image {
    filter: brightness(0) invert(30%) sepia(100%) saturate(500%) hue-rotate(170deg);
}

.bannerwrap .loginBox .loginBajo img {width:20px; vertical-align: middle; display: inline-block; margin-right: 6px;}




/* userBox */

.bannerwrap .userBox {font-size: 1.1rem; line-height: 2.2rem;}
.bannerwrap .userBox .username {font-size: 1.4rem; font-weight: bold;}
.bannerwrap .userBox .username span {font-size: 2.3rem;}
.bannerwrap .userBox .usernumber {margin-top: 8px; font-size: 1.17rem;}
.bannerwrap .userBox .usernumber span {font-weight: bold;}


.bannerwrap .userstate {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 10px; grid-row-gap: 20px; background:#f8f8f8; border-radius: 10px; padding:16px 24px 12px; margin: 0px 0 24px; color: #555; grid-template-rows: 1fr 24px;}
.bannerwrap .userstate span {grid-column: span 3; text-align: center;}

.bannerwrap .userstate a span {color:#0074e5; font-weight: bold; display: block; margin-top: 4px;}
.bannerwrap .userstate a {border-right: 1px solid #d8d8d8; text-align: center;}
.bannerwrap .userstate a:nth-child(3) {border-right: none;}


.bannerwrap .userinfo {margin:0 0 50px 10px; display: grid; grid-template-columns:1fr; justify-items: center;}
.bannerwrap .userinfo a {color: #0074e5; font-weight: bold;}








/*quickMenu*/

.quickMenu {margin-left: -24px;}
.quickMenu li {float: left; width: 140px;}
.quickMenu li:first-child {margin-left:0;}
.quickMenu li a {display: block; text-align: center;}
.quickMenu li a span {display: block; box-sizing: border-box; width: 80px; height:80px;background:#fff; border-radius: 10px; margin:0 auto 18px;}
.quickMenu li a img {display: block; margin:auto;  width:60%; padding-top:16px;}

.quickMenu li a span:hover, .quickMenu li a span:active, .quickMenu li a span:focus {box-shadow: 3px 3px 6px rgba(27, 59, 146, 0.1);}


.quickMenu li a br {display: none;}










/*contnet 그리드 및 타이틀*/

.content1 {display: grid; grid-template-columns: 2.6fr 2fr; grid-column-gap: 5%; /*grid-template-rows: repeat(1, minmax(330px, auto));*/}
.content2 {display: grid; grid-template-columns: 3fr 1fr; grid-column-gap:5%; }

.main_wrap .contentArea h3.title {font-size: 1.9rem; font-weight: bold; margin-bottom: 40px;}





/* content1 program*/


.program, .news {position:relative}

.content1 .news p {display: inline-block; vertical-align: middle;}
.news li {padding: 2% 0; border-bottom: 1px solid #D6D6D6;}
.news li a {display: block;}

.RBcolor .news li a:hover .date, .RBcolor .news li a:hover .dia, .RBcolor .news li a:active .date, .RBcolor .news li a:active .dia {color: #0074e5; border-color: #0074e5;}


.content1 .date {padding:3% 2%; border: 1px solid #D6D6D6; border-radius: 10px; font-size: 0.8rem; text-align: center; margin-right: 2%;}
.content1 .date .dia {font-weight: bold; display: block; font-size: 1.17rem; margin-top: 6px;}

.content1 .tit {font-weight: bold; display: block; margin-bottom: 2%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.news li:first-child {padding-top:0;}
.news li .newslist {width: 80%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.program li {width: 49%; float: left;}
.program li:first-child {margin-right: 2%;}
.program li a {display: block; padding: 28px 30px; border: 1px solid #D6D6D6; border-radius: 10px;}



.program p {font-size: 1.2rem; font-weight: bold;}
.program p.textOF2 {margin-bottom: 26px; width: 100%; border-top: 1px solid #d9d9d9; margin-top: 12px; padding-top: 20px; line-height: 1.5em; height: 60px;}

.program .pginfo {display: block; width: 100%;}
.program .pginfo b {display: inline-block; width:80px; font-weight: bold; line-height: 1.7rem; vertical-align: top;}

.program .pginfo u {display: inline-block; width: 70%; text-decoration: none;}
.program i {display: inline-block; padding: 4px 6px; border: 1px solid; font-size: 0.8rem; float: right;}

.program i.end {color:#329832;}
.program i.ing {color:#0055AA;}
.program ul li {float: left;}

/*1010추가*/
.tab-content .newsno li {text-align: center; width: 100%; border: 1px solid #ccc; border-radius: 10px; padding: 140px 0;}






/* slider */

.slider {position: relative; margin: 0 auto; overflow: hidden; max-width: 520px; border-radius: 10px; width: 100%; height: 394px;}

.slides {display: flex; transition: transform 0.5s ease-in-out; width: 100%;}
.slides a {display: block; flex: 0 0 100%; background:#f8f8f8;}
.slides img { width: 100%; object-fit: cover;}

.conIndi {position:absolute; bottom: 0; right: 0;}
.controls {display: flex; justify-content: space-between; float:left; padding-right: 14px; background: rgba(0, 0, 0, 0.8); width: 86px;}

.controls button {background:none; border: none; color: white; cursor: pointer; height: 42px; padding:0 10px;}


.indicators {line-height: 42px; background: rgba(0, 0, 0, 0.8); text-align: center; padding-left: 14px; float:left; width:74px;}
.indicators span {color: white;}







/* content2 */

.content2 {margin-top: 80px;}






/*book tab*/


.commonTAB {position:relative;}

.commonTAB .tabs {display: flex; margin-bottom: 20px; position:relative;
}

.commonTAB .tab {margin-right: 24px; cursor: pointer; border-bottom: 2px solid transparent;}


.commonTAB .tab h3 {margin: 0; font-weight: normal;}
.commonTAB .tab .on {font-weight: bold;}
.commonTAB .tab-content {display: none; position: absolute; top:40px; left:0;}
.commonTAB .tab-content.active {justify-content: space-around; width: 100%;}
.commonTAB .tab-content ul.book {display: grid; grid-template-columns:1fr 1fr 1fr 1fr; padding: 0; list-style: none; margin-left: -10px; width: 100%;}
.commonTAB .tab-content ul.book li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.1rem;}

.commonTAB .tab-content ul.book li:last-child {margin-right: 0;}

.commonTAB .tab-content ul.book a {display: block; text-align: center;}

.commonTAB .tab-content ul.book li img { display: block; height: auto; margin:0 auto; border: 1px solid #D9D9D9; border-radius: 10px; box-shadow: 3px 3px 6px rgb(22, 22, 22, 0.1); width: 200px; height: 280px;}
.commonTAB .tab-content ul.book li b {display: block;font-weight: bold; margin:20px 0 14px;}



.morePlus {position: absolute; top:-60px; right: 0;}

.morePlus img {margin-left: 10px;}



.tabs-group {margin-bottom: 20px;}
.tab {display: inline-block; margin-right: 10px; cursor: pointer;}
.tab h3 a {text-decoration: none; font-size: 1.9rem; padding: 4px 0; color: #555;}
.tab.active h3 a {color: #1d1d1d; border-bottom: 2px solid #1d1d1d;}
.tab-content {display: none; margin-top: 30px;}

.tab-content.active {display: block;}


.tabs-group .tab-content {position: absolute;}



/* date */


.dateB {position:relative;}
.dateB .dateBox {background: linear-gradient(to bottom, #8fc8ff 0%,#8fc8ff 50%,#c7e3ff 50%,#c7e3ff 100%); text-align: center; padding: 18% 8%; box-sizing: border-box;}


.dateB .dateBox b {display: block; margin-bottom: 24px; font-size: 1.4rem; text-transform: uppercase; font-weight: bold; }
.dateB .dateBox span {display: inline-block; background:#fff; border-radius: 10px; width:32%; height:130px; vertical-align: middle; line-height: 130px; text-align: center; font-size: 2rem; font-weight: bold;}

.dateB h3 {font-size: 1.9rem; font-weight: bold; margin-bottom: 40px;}

.dateB .dateBox span.year {font-size: 1.5rem; font-weight: normal;}

.dateB p {text-align: center;}
.dateB p b {display: block; font-weight: bold; margin:18px 0 14px; font-size: 1.17rem;}
.dateB p span {font-weight: bold; color: #ed0000;}

.dateB .datePlus {top:10px;}





/*1007 배너추가*/

.bannerBox {max-width: 1280px; width: 100%; overflow: hidden; margin: 32px auto -200px;}

.bannerArea {position: relative; width: calc(100% - 40px); margin: 0 auto;}

.bannerAreaIn {width: 85%; overflow: hidden;}
.bxsliderBN {display: flex; width: max-content; transition: transform 1s ease;}
.bxsliderBN li {margin-right: 18px;}
.bxsliderBN li a {border: 1px solid #ccc; width: 195px; height: 64px; text-align: center;}
.bxsliderBN li a img {height: 100%;}
.bannerControl {position: absolute; top: 0; right: 0; display: flex; justify-content: space-between; border: 1px solid #ccc; height: 64px; background:#fafafa; align-items: center; z-index: 10;}
.bannerControl button {position:relative; background:#fafafa; color: white; border: none; padding: 10px; cursor: pointer; overflow: hidden; z-index: 10;}




/* 1016 인기검색어 변경 */
.popular_wrap {display: grid; grid-template-columns: 1fr 3fr 1fr; vertical-align: middle; margin: 12px 0 32px;}
.popular_wrap>p {font-weight: bold; padding: 12px 0; border-radius: 8px;}
.popular_wrap .navi{text-align: right; line-height: 44px;}
.popular .none{display:none}
#ticker{float:left;}
.popular { padding:0; height:22px; overflow:hidden; float:left;}
.popular {margin: 10px 12px;}
.popular ul, .popular li {margin:0; padding:0; list-style:none;}
.popular li a {display:block; height:24px; line-height:20px; color:#555; text-decoration:none;}
.popular li span::after {content: '위 -';}

.navi img {width: 14px;}
.popular_wrap .pause img {margin: 0 6px; height: 14px;}



/* 0909 메인 탭 화살표 수정 */
button.scroll-btn {display: none;}





/*레이어팝업*//*1218*/
.layerPopArea{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99999 !important; margin-top: 0 !important; display: none; overflow: scroll;}
.layerPopBox{width: 1280px; margin: 0px auto; overflow: hidden; position: relative; box-sizing: border-box; padding: 0 42px 80px;}
.laypar {position: absolute; bottom:136px; height: 50px; width: 100%; z-index: 9999;}
.layerPopArea .swiper-button-next, .layerPopArea .swiper-button-prev{border: 1px solid #ddd; background: #fff; border-radius: 50%; width: 40px; height: 40px;}
.layerPopArea .swiper-button-next{right: 7%; top: 50%;}
.layerPopArea .swiper-button-prev{left: 0%; top: 50%;}
.layerPopArea .swiper-button-next:after, .layerPopArea .swiper-button-prev:after{font-size: 24px; color: #333; font-weight: 300;}
.layerPopArea .swiper-wrapper{width: 100%; text-align: center;}
.layerPopArea .swiper-slide a{max-height: 573px; margin: 0 auto; overflow: hidden;}
.layerPopArea .swiper-slide p{padding: 80px 40px 40px 40px; box-sizing: border-box; text-align: center; font-size: 24px; color: #fff; line-height: 32px; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:170px;}
.layerPopArea .swiper-slide img {display: block; width: 100%; height: auto; margin: 0 auto;}
.layerPopArea .swiper-pagination-bullet{width: 16px; height: 16px; background: #fff; opacity: 1;}
.layerPopArea .swiper-horizontal>.swiper-pagination-bullets, .layerPopArea .swiper-pagination-bullets.swiper-pagination-horizontal, .layerPopArea .swiper-pagination-custom, .layerPopArea .swiper-pagination-fraction{bottom: 160px;}
.layerPopArea .swiper-pagination-bullet-active{background: #868686;}
.layerPopArea .closeBtn{display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 120px;}
.layerPopArea .closeBtn a{display: block; box-sizing: border-box; text-align: center; color: #fff;}
.layerPopArea .closeBtn a:first-child {text-align: left;}
.layerPopArea .closeBtn a:last-child {text-align: right;}

.layerTitle{position:absolute; top:15%; left:50%; transform: translate(-50%, -50%); width:1600px; max-width:calc(100% - 260px); text-align:center;}
.layerTitle > p{font-size:36px; font-weight:bold; line-height:150%; margin-bottom:2px; color:#fff;}
.layerTitle > div > .popBar{display:block; width:calc(50% - 150px); float:left; border-bottom:3px solid rgba(255, 255, 255, 0.5); height:45px;} 
.layerTitle > div > p{font-size:48px; font-weight:bold; line-height:150%;  width:300px; text-align:center; float:left; color:#fff;}

.mySwiper3 {padding-top: 230px;}
 

/* 1300 */

@media screen and (max-width:1300px) {
	
    .bannerwrap, .content1, .content2 {width:calc(100% - 80px);}
	  .content1 {grid-template-columns:2.5fr 2fr;}
    .commonTAB .tab-content ul.book {grid-column-gap: 16px;}
    .commonTAB .tab-content ul.book li img {width:96%;}
    
    
    .content1, .content2 {grid-column-gap: 50px;}

    .quickMenu li{margin-bottom: 32px; }
    .topList .right li {line-height: 31px;}

    /*1007 배너추가*/
   .bannerAreaIn {width: 82%;}

   /*레이어팝업*/
   .layerPopBox{width: 80%; }

}


/* 1224 */

@media screen and (max-width:1224px) {


    

    .content1 {margin-bottom:100px;}
    .program p.textOF2 {margin-bottom: 16px; padding-top: 12px;}
    .dateB .dateBox span {width: 28%; font-size: 1.5rem;}
    .date .dateBox {padding: 14% 8%;}
    
    .slider {margin-top:4%;}

    
   .popular_wrap {grid-template-columns: 1fr 2fr 1fr;}

   
   .slider {max-height: 394px; height: initial;}
    

}



/* 1140 */

@media screen and (max-width:1140px) {

    .bannerwrap .textsearch .header-search input[type="radio"] {margin-left: 12px;}
    .bannerwrap .textsearch li.lisearch {width: 100%;}

    .tab h3 a {font-size: 1.4rem;}
    .main_wrap .contentArea h3.title {font-size: 1.4rem;}
    .quickMenu li a br {display: block;}
    
    .commonTAB .tab-content ul.book {margin-left: 0;}

    .slider {margin-top:0;}

    .commonTAB .tab-content {top:32px; } 
    .program p {font-size: 1rem;}
    .program .pginfo {font-size: 0.9rem; line-height: 0.5rem;}
    .program li a {padding:24px;}
    .program p.textOF2 {margin-bottom: 12px; padding-top: 12px;}
    .date .dateBox span, .date .dateBox span.year {font-size: 1.2rem;}
    .date .dateBox span {height: 110px; line-height: 110px;}

    .program .pginfo u {overflow: hidden;}
    .program .pginfo u.textOF2 {line-height: 1.4rem;}
    .program p.textOF2 {height: 54px;}

    .conIndi {bottom: 2%; right: 0; border-radius: 0 0 10px 0;}
    .controls {border-radius: 0 0 10px 0;}

    .dateB h3 {font-size: 1.5rem; margin-top: 4px;}
    .morePlus {top:-50px;}
  
    .dateB .dateBox span.year {font-size: 1.2rem;}
    .dateB .dateBox span {height: 90px; line-height: 90px; font-size: 1.2rem;}
    
    .bannerwrap .textsearch .header-search .searchBtn {padding: 10px;}
    .bannerwrap .textsearch .header-search .searchBtn img {max-width: 24px;}
    
   

    
}





/* 980 */
@media screen and (max-width:980px){
	
	  .loginBox {display: none;}
    .bannerwrap {grid-template-columns:1fr;}
    .bannerwrap .textsearch .header-search {grid-template-columns:0.3fr 0.3fr 4fr 0.5fr}
    .main_wrap .contentArea h3.title {margin-bottom: 30px;}
    .quickMenu li a br {display: none;}

    .content1 .date .dia {font-size: 1rem;}
    .news li .newslist {font-size: 0.9rem;}

    .program .pginfo b {line-height: 1.3rem; width: 56px;}
    .program .pginfo u.textOF2 {line-height: 1.2rem;;}

    .slider {margin-top: 8%;}
    .conIndi {bottom: 0;}


    .commonTAB .tab-content ul.book li {font-size: 0.9rem;}
    .commonTAB .tab-content ul.book li b {margin: 18px 0 8px;}
    .commonTAB .tab-content {top:24px;}




    .dateB .dateBox {padding: 14% 8%;}
    .dateB p, .dateB p b {font-size: 0.9rem;}
    .dateB .dateBox b {font-size: 1rem;}
    .dateB .dateBox span {height: 90px; line-height: 90px;}
    .dateB .dateBox span.year {font-size: 1.2rem;}
    .dateB .dateBox span {font-size: 1.5rem;}
 
    .dateB .datePlus { top:8px;}
    .dateB .datePlus, .morePlus {font-size: 0.8rem;}
    .dateB .dateBox b {margin-bottom: 12px;}
    .morePlus img {width:10px; margin-left: 4px;}
    




    
    


}





/* 860 */
@media screen and (max-width:860px){
	
  .bannerwrap, .content1, .content2 {width:calc(100% - 32px);}/*1028 수정*/
    .content1, .content2 {grid-template-columns: 1fr;}
    .content2 {grid-row-gap: 80px;}


    .bannerwrap .textsearch .lisearch {width:100%;}
    .news li .newslist {font-size: 1rem;}
    .program .pginfo b {width: 80px;}
    .program .pginfo u.textOF2 {line-height: 1.4rem;}
    

    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        padding: 10px 20px;
        width: 100%;
        z-index: 99;
      }
      .menu.active {
        display: flex;
      }
      .menu li {
        margin: 10px 0;
      }
      .burger-menu {
        display: block;
      }

    /* 1016 인기검색어 변경 */
    .popular_wrap {grid-template-columns: 1fr;}
    .popular_wrap .navi {text-align: left;}



    /*1028 메인 컨텐츠 최소높이*/

    .commonTAB {min-height: 380px;}

  /*레이어팝업*//*1218*/
   .layerPopBox{width: 100%; margin: 50px auto; padding: 0 20px; position: relative;}
   .laypar {position: absolute; bottom: 90px; height: auto; right: 0; width: 100%;}
   .layerPopArea .swiper-button-next:after, .layerPopArea .swiper-button-prev:after{font-size: 20px;}
   .layerPopArea .swiper-button-next, .layerPopArea .swiper-button-prev{width: 34px; height: 34px; bottom: 0;}
   .layerPopArea .swiper-button-next{right: 14px; margin: initial;}
   .layerPopArea .swiper-button-prev{left: 14px; margin: initial;}
   .layerPopArea .swiper-slide p{font-size: 17px; padding: 70px 30px 30px 30px; height: 170px; line-height: 26px; -webkit-line-clamp: 4}
   .layerPopArea .swiper-pagination-bullet{width: 12px; height: 12px;}
   .layerPopArea .swiper-horizontal>.swiper-pagination-bullets, .layerPopArea .swiper-pagination-bullets.swiper-pagination-horizontal, .layerPopArea .swiper-pagination-custom, .layerPopArea .swiper-pagination-fraction{bottom: 60px;}
   .layerPopArea .closeBtn{margin-top: 100px;}
   .layerPopArea .swiper-slide a{max-height: 744px;}
   .layerPopArea .swiper-slide img {width:100%;}
   .layerTitle > p{font-size:16px; margin-bottom:2px;}
   .layerTitle > div > .popBar{width:calc(50% - 70px); height:20px;} 
   .layerTitle > div > p{font-size:30px; width:140px;}
   .layerTitle {max-width: initial; top:70px;}
   .mySwiper3 {width: 100%; margin: 0 auto; padding-top: 130px;}
   .layerPopArea .swiper-button-next,
   .layerPopArea .swiper-button-prev {
     pointer-events: auto; /* 화살표에서만 이벤트를 처리 */
     z-index: 10; /* 버튼이 더 앞에 위치하도록 설정 */
 }

      
}





/* 620 */
@media screen and (max-width:620px){


    .bannerwrap .textsearch .header-search {grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; position: relative;}
    .bannerwrap .textsearch .header-search .search-radio {grid-column: 1 / 2; grid-row: 1 / 2;}
    .bannerwrap .textsearch .header-search .grid2 {grid-column: 2 / 3; grid-row: 1 / 2;}
    .bannerwrap .textsearch .header-search input {grid-column: 1 / 3; grid-row: 2 / 2;}
    .bannerwrap .textsearch .header-search button {grid-column: 3 / 4; grid-row: 2 / 2;}
    .bannerwrap .textsearch .header-search .searchBtn {padding: 0 18px;}
    .bannerwrap .textsearch .header-search input[type="text"] {border-left:none; padding-left:12px; margin:12px 16px;}
    .bannerwrap .textsearch .header-search .search-radio {padding: 20px 4px; margin:0 12px;}

    .bannerwrap .textsearch .header-search::before {content: ''; display: block; background-color: #555; width: 90%; height: 1px; position: absolute; top: 50%; left: 5%;}
    .bannerwrap .textsearch li .bar {display: none;}



    .quickMenu li a br {display: block;}
    .quickMenu li {margin-right: 6%;}

}







/* 619 */
@media screen and (max-width:619px) {


    .bannerwrap .textsearch>li:first-child {font-size: 1.2rem; line-height: 3rem;}
    .bannerwrap .textsearch li:first-child p {font-size: 3.6rem;}

    .quickMenu {margin-left: 0;}
    .quickMenu li {margin-right: 10%; width: 26%;}
    .quickMenu li:nth-child(3), .quickMenu li:nth-child(6) {margin-right: 0;}

    .news li {padding: 14px 0;}
    .news li:last-child {border-bottom: none; padding-bottom: 0;}
    .news li .newslist {width: 77%;}

    .content1 .tit {margin-bottom: 8px;}

    .morePlus {position: static; display: block; border: 1px solid #d8d8d8; text-align: center; font-size: 1rem; padding:12px 0; border-radius: 6px;  margin-top: 24px;}
    .dateB .datePlus, .morePlus {font-size: 1rem; margin-top: 24px;}


    .program .pginfo u {display: flex; width: 100%;}

    .slider {margin-top: 80px;}
    .controls button {padding: 0 16px;}
    .controls {width: auto;}

    
    .commonTAB .tab-content ul.book {grid-template-columns: repeat(2, 1fr); }
    .commonTAB .tab-content ul.book li:nth-child(1), .commonTAB .tab-content ul.book li:nth-child(2) {margin-bottom: 32px;}
    .commonTAB .tab-content ul.book li img {max-width: 200px; min-width: 130px; max-height: 200px;}
    

    
    /*1010추가*/
    .tab-content .newsno li { padding: 0; border: none; text-align: left;}

    
    /*1028 메인 컨텐츠 최소높이*/

    .content1 .commonTAB {min-height: 390px;}
    .content2 .commonTAB {min-height: 540px;}

    .program li a {padding:14px;}

    
}



/* 390 이하 */
@media screen and (min-width:240px) and (max-width:390px) {


    .bannerwrap .textsearch .header-search button {grid-column:2 / 4;}
    .bannerwrap .textsearch li:first-child p {font-size: 3rem;}

    .content2 .commonTAB .tab-content.active {width: 94%;}
    .bannerwrap .textsearch .header-search button {grid-column:3 /4;}

    .news li .newslist {width: 73%;}
    .dateB {width: 94%;}

    .commonTAB .tab {margin-right:12px}

}