@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@font-face{
    font-family: 'tway';
    src: url('../font/tway_air.ttf');
}


/* 공통속성 */
*{margin: 0; padding: 0; box-sizing: border-box; }
body{line-height: 1.6; letter-spacing: -1.2px; color: #222; font-family: 'Pretendard'; background: #fff; font-size: 14px;}
a{text-decoration: none; color: #333;}
img{max-width: 100%;}
.mobile{display: none;}
img{max-width: 100%;}
em{font-style: normal;}
.sub_title{position: relative; margin-bottom: 30px; font-size: 34px; font-weight: 700;}
.more_view{color: #555; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
 padding-right: 18px; transition: all 0.3s; font-weight: 400; font-size: 16px;}
.more_view::after{content: ""; background: url(../img/icon/more_arrow.svg) no-repeat; width: 11px; height: 14px; background-size: 100%; right: 2px; top: 50%; transform: translateY(-50%); transition: all .2s; display: inline-block; position: absolute; }   
.more_view:hover{color: #222;}
.more_view:hover::after{right: 0;}


/* 스와이프 관련 */
.swiper_pauseBtn{width: 24px; height: 16px; border-radius: 3px; position: absolute; background:rgba(0, 0, 0, .5) url(../img/icon/slide_pause.png)no-repeat center center;  display: block; border: none; }
.swiper_playBtn{width: 24px; height: 16px; border-radius: 3px; position: absolute; background:rgba(0, 0, 0, .5) url(../img/icon/slide_start.png)no-repeat center center;  display: block; border: none; } 
.swiper_nextBtn{cursor: pointer; position: absolute; display: flex; justify-content: center; align-items: center; right: 10px; margin-top: -22px; z-index: 20; background: url(../img/icon/main_slide_right.svg)no-repeat; width: 9px; height: 14px;}  
.swiper_prevBtn{cursor: pointer; position: absolute; display: flex; justify-content: center; align-items: center; left: 10px;  margin-top: -22px; z-index: 20; background: url(../img/icon/main_slide_left.svg)no-repeat; width: 9px; height: 14px;} 
.swiper-button-disabled{opacity: .35; cursor: auto; pointer-events: none;}


/* 레이어 */
.popup_bg{position: fixed; z-index: 2100; left: 0; top: 0; background: rgba(0, 0, 0, .4); width: 100%; height: 100vh; display: none; }
#content section{margin: 100px 0;}
.inner_wrap{ max-width: 1440px; margin: 0 auto; width: 100%; padding: 0 15px;}
#header{ width: 100%; position: fixed; left: 0; top: 0; border-bottom: 1px solid #dadada; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .05); background: #fff; padding-top: 50px; transition: all 0.3s; z-index: 1001;}
#content{padding-top:150px; margin-bottom: 70px ; }
section#section01{position: relative; margin: 0; margin-top: 50px;}
section#section04{height: 800px; background-size: cover; background-attachment: fixed; position: relative; padding: 0; background-repeat:no-repeat ;}
#footer{border-top:1px solid #ddd; padding: 40px 0 60px 0;}
#top{font-size: 15px; font-weight: 400; position: fixed; box-shadow: 4px 10px 8px rgb(0 0 0  /  5%); border: 1px solid #eee; background: #fff; width: 60px; height: 60px; display: inline-block; text-align: center; line-height: 60px; z-index: 999; bottom: 30px; right: 25px;}

/* header */
.header_Top{position: absolute; border: 1px solid #eee; width: 100%; left: 0; top: 0;} 
.header_top_wrap{height: 48px; width: 100%; font-size: 14px; font-family: 'Nanum Gothic',sans-serif; line-height: 1.35em;}
.header_top_holder{position: relative; max-width: 1440px; margin: 0 auto; height: 48px;}
.header_top_logo{float: left; margin-top: 8px; height: 18.5px; width: 97.5px;   }
.header_top_logo a{display: block; text-indent: -999999px; background: url(../img/icon/icon_set_common.png)no-repeat 0 -166px; width: 107px; height: 27px;}
.header_top_news{position: absolute; left: 0; right:290px; left: 179px; height: 48px;}
.header_top_news .header_newsIcon{display: block; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 19px; height: 17px; background: url(../img/icon/ico-sprite-common-gnb.png) no-repeat 0 -45px; background-size: 300px auto; text-indent: -99999999px;}
.header_top_news .header_news{padding-left: 23px; color: #575757; display: block; height: inherit; width: 100%; line-height: 48px;}
.header_top_menu{position: absolute; right: 0; top: 0;}
.header_top_menu ul{display: flex; }
.header_top_menu ul li{padding: 0 10px;}
.header_top_menu ul li a{ display: block; line-height: 48px; font-size: 14px; font-weight: 700; color: #575757;}
#header .nav_wrap{position: relative; height: 90px;}
#header .nav_wrap h1{display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 160px;} 
#header .nav_wrap h1 a:first-child{display: none; width: 35px;}


/* header nav */
#gnb{position: absolute; left: 280px; font-size: 14px;}
#gnb .depth1>li{width: 120px; float: left;}
#gnb .depth1>li ~li{margin-left: 20px; }
#gnb .depth1 .sub5 img{vertical-align: middle; }
#gnb .depth1>li>a{font-size: 18px; text-align: center; line-height: 90px; display: block; font-weight: 700; cursor: pointer;}
#gnb .depth1>li>a:hover{ color: #a70638;}
#gnb .depth1 li .depth2{overflow: hidden; font-size: 13px; height: 0; transition: height .3s; position: absolute; z-index: 1; text-align: center; width: inherit;}
#gnb .depth1 li .depth2 li{margin-top: 5px; padding: 10px 0;}
#gnb .depth1 li .depth2 li a{display: block; line-height: 24px; text-align: center; font-size: 16px; color: #555;}
#gnb .depth1 li .depth2 li a:hover{ color: #a70638; font-weight: bold;}

#header.open{box-shadow: none; border-bottom: none;}
#header.open::after{height: 210px; padding-bottom:20px; }
#header::after{content: ""; position: absolute; left: 0; top: 100%; height: 0; background: #fff; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05); transition: height .3s; width: 100%;}
#header.open #gnb .depth1 li .depth2{height: 180px; }

    /* 메뉴버튼 */
#header a.menu{position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 16px; z-index: 10; cursor: pointer;}
.line1{width: 100%; height: 2px; background: #2e2e2e; transition: all 0.3s; transform: rotate(0deg);  position: absolute; top: 0;}
.line2{width: 100%; height: 2px; background: #2e2e2e; transition: all 0.3s; transform: rotate(0deg);  position: absolute;  opacity: 1;  top: 46%;}
.line3{width: 100%; height: 2px; background: #2e2e2e; transition: all 0.3s; transform: rotate(0deg);  position: absolute; top: 96%; }
.menu.close>div{width: 120%;}
.menu.close .line1{transform: rotate(-45deg); top: 6px;}
.menu.close .line2{opacity:0;}
.menu.close .line3{transform: rotate(45deg); top: 6px;}

#gnb.open{display: block; position: fixed; left: 0; width: 100%; background: #fff; font-size: 15px; z-index: 9999; box-sizing: border-box; height: calc(100% - 51px); top: 71px; padding: 0; }
#gnb.open .depth1>li i{position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
#gnb.open .depth1>li a i.plus{background: url(../img/icon/menu_plus.svg) no-repeat; width: 16px; height: 16px;}
#gnb.open .depth1>li a i.minus{background: url(../img/icon/menu_off.svg) no-repeat; width: 16px; height: 16px;}
#gnb.open .depth1>li>.depth2{  position: relative;  background-color: #a70638; width: 100%;  display: none; transition: none; height: auto;}
#gnb.open .depth1>li .depth2>li{ margin-top: 0;}
#gnb.open .depth1>li .depth2>li>a{display: block; line-height: 28px; color: #fff; padding-left: 20px; text-align: left;}

/* 검색창 */
.searchBtn{position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1;}
.header_search_layer{ position: fixed; left: 0; top: -380px; width: 100%; background: #fff; display: none; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .1); z-index: 100;}
.header_search_layer.on{top: 60px; display: block; }
.header_search_layer h2{ position: relative; text-align: center; padding: 14px 0; font-size: 34px;}
.header_search_layer .search_closeBtn{right:60px; top: 10px; position: absolute; border: none; background: transparent;}
.header_search_layer .search_bar{max-width: 940px;  margin: 70px auto 95px auto; position: relative;}
.header_search_layer .search_bar input{width: 100%; border: none; border-bottom: 3px solid #222; padding: 20px; font-size: 16px;}
.header_search_layer .search_bar button{position: absolute; top: 50%; transform: translateY(-50%); right:20px; background-color: transparent; border: none;}


/* section01 */
/* swiper */

#section01 .swiper-slide{ background-repeat:no-repeat ; background-size: 1920px ; background-position: center bottom; height: 780px;   backface-visibility: hidden; transform: translateZ(0); width: 100%; }
#section01 .inner_wrap{height: 100%; font-family: 'tway';}
#section01 .inner_wrap>div{margin-top: 110px;}
#section01 .inner_wrap>div>p{font-size: 22px;}
#section01 .inner_wrap>div>h3{font-size: 48px;}
#section01 .controller_wrap{position: absolute; top: 260px; max-width: 1440px; margin: 0 auto; width: 100%; height: 40px; left: 50%; transform: translateX(-50%); padding: 0 15px; z-index: 10;}
#section01 .controller_wrap>div{width: 110px; position: relative;}
#section01 .controller_wrap .swiper_pagination{font-size: 15px; bottom: 3px; color: #999;   text-align: center; position: absolute; width: 100%; text-align: center; }
.swiper-pagination-total, .swiper-pagination-current{color: #222;}
#section01 .controller_wrap .swiper_pauseBtn{ left: 118px; top: -22px; }
#section01 .controller_wrap .swiper_playBtn{ left: 118px; top: -22px;}

/* sidemenu */
.main_quick_menu{max-width: 1440px; padding: 0 15px; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; width: 100%;}
.main_quick_menu ul{display: flex; flex-wrap: wrap;  background-color: #a70638fa; right: 0; top: 100px; position: absolute; max-width: 447px; width: 100%; padding: 30px 20px; justify-content: center;}
.main_quick_menu ul li{width: 33.3%; text-align: center; margin: 20px 0;}
.main_quick_menu ul li em{display: inline-block; height: 50px;}
.main_quick_menu ul li a span{display: block; color: #fff; line-height: 1.25;}


/* section02  */


#section02 .swiper-slide{background: #f8f8f8; height: 440px; width: 450px;  }
#section02 .swiper-slide a{position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all .4s;}
#section02 .swiper-slide a img{box-shadow: 0 15px 15px 0 rgba(0,0,0,0.1); vertical-align: middle;}
#section02 .swiper-slide a:hover img{box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1);}
#section02 .swiper-slide .book_info{position: absolute; height: 135px; bottom: -135px; width: 100%; transition: all .3s; background: rgba(255, 255, 255, .85);}
#section02 .swiper-slide:hover>.book_info{bottom: 0;}
#section02 .swiper-slide .book_info em{display: block; text-align: center; font-weight: 700; margin-top: 40px; font-size: 22px;}
#section02 .swiper-slide .book_info span{display: block; text-align: center; font-size: 16px;} 

/* section03 */
#section03 .notice_list{display: flex;}
#section03 .notice_list li{display: inline-flex; width: 25%; padding: 0 40px;}
#section03 .notice_list li~li{border-left: 1px solid #e4e4e4 ;}
#section03 .notice_list .date{text-align: center;}
#section03 .notice_list .date .red{color: #a70638; font-weight: 700; margin-top: 4px; font-size: 34px;}
#section03 .notice_list .date .year{margin-top: -5px; color:#555;}
#section03 .notice_list .notice_link{padding-left: 35px;}
#section03 .notice_list .notice_link .notice_status{margin-bottom: 5px; color: #555; font-size: 16px; font-weight: 400;}
#section03 .notice_list .notice_link>a{line-height: 1.4; height: 2.8em; font-weight: 600; font-size: 18px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#section03 .notice_list .notice_link>a:hover{color: #23a8e0;}


/* section04 */
#section04 .tabslide{width: 100%; height: 100%;}
#section04 .tab_slide{position: relative; padding: 100px 0 120px 0;}
#section04 .tab_slide .slide_cont_wrap{max-width: 1440px; width: 100%; margin: 0 auto; position: relative; padding: 0 15px;}
#section04 h2{color: #fff; font-weight: 400; position: relative; font-size:34px}
#section04 h2 b{font-weight: bold; color: #fff;}
#section04 h2 em{display: inline-block; border-bottom: 2px solid #fff; line-height: 1;}
#section04 h2 a.more_view{font-size: 18px; font-weight: 400; color: #fff; position: relative; }
#section04 h2 a.more_view::after{background: url(../img/icon/more_arrow2.png) no-repeat;  }

#section04 .tab_slide_content{width: 665px; position: absolute; padding: 40px 60px; right: 0; top: 60px; background: #fff;} 
#section04 .contents_type {position: relative;}
#section04 .type{padding: 0 12px; display: inline-flex; align-items: center; color: #fff; justify-content: center; height: 34px; font-size: 15px;}
#section04 .type1{background: #222;}
#section04 .type2{background: #a70638;}
#section04 h3{margin: 15px 0; max-width: 350px; font-size: 34px;}
#section04 h3 a{height: 3.9em; text-align: left; overflow: hidden; text-overflow: ellipsis;  word-wrap: break-word; display: -webkit-box; color: #333; line-height: 1.3; font-weight: bold; white-space: normal; -webkit-line-clamp: 2; }
#section04 h3 a:hover{color: #23a8e0;}
#section04 .content_text{max-width: 350px; font-weight: 300; font-size: 18px; color: #555; overflow: hidden; text-overflow: ellipsis;  word-wrap: break-word; display: -webkit-box; white-space: normal; text-align: left; -webkit-line-clamp: 3; height: 4.5em; line-height: 1.5; word-break: keep-all}
#section04 .schedule_list{margin-top: 30px;}
#section04 .schedule_list li{font-size: 16px;}
#section04 .schedule_list li em{font-weight: 700; margin-right: 5px; display: inline-block; }
#section04 .schedule_list li span{font-weight: 300;}

.tabslide .tap_pagination { position: absolute; width: 100% ; max-width: 1440px ;  display: flex ; justify-content: space-between ; bottom: 75px !important; z-index: 2 ; left: 50% !important;  transform: translateX(-50%) ;}
.tabslide .swiper-pagination-bullet {width: calc(25% - 7px) ;  height: 40px ; border-radius: 0 ; text-align: center ; border-bottom: 1px solid #fff; opacity: .6; background-color: transparent;}
.tabslide .swiper-pagination-bullet-active {font-weight: 700; opacity: 1;border-bottom: 3px solid #fff;}
.tabslide  .swiper-pagination-bullet span{ color: #fff; display: block; width: 100%; height: 100%; padding-bottom: 20px;}
#section04 .tabslide .swiper_pauseBtn{border: 1px solid #eee; height: 18px; left: 50%;  transform: translate(-50%, -50%); bottom: 20px;  z-index: 110; }
#section04 .tabslide .swiper_playBtn{border: 1px solid #eee; height: 18px; left: 50%;  transform: translate(-50%, -50%); bottom: 20px;  z-index: 110; }
#section04 .tabslide .controller_wrap{position: absolute; top: 22px; right: -22px; height: 40px; padding: 0 15px; z-index: 10; margin: 0 auto;}
#section04 .tabslide .controller_wrap>div{position: relative; width: 110px;}
#section04 .tabslide .controller_wrap .swiper_pagination{bottom: 2px; color: #999; left: 0; width: 100%; position: absolute; z-index: 10; text-align: center;}
#section04 .tabslide .controller_wrap .swiper_nextBtn{width: 9px; height: 14px;}
#section04 .tabslide .controller_wrap .swiper_nextBtn{width: 9px; height: 14px;}

/* section05 */
#section05 .inner_wrap{display: flex; justify-content: space-between;}
#section05 .special_lecture{width: calc(50% - 40px );}
#section05 .lecture_box ul li{display: flex;}
#section05 .lecture_box ul li ~li{margin-top: 30px;}
#section05 .lecture_video{width: 330px; height: 185px; position: relative; overflow: hidden;}
#section05 .lecture_video a>img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto;}
#section05 .lecture_video a>.play-icon{width: 40px; height: 40px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#section05 .lecture_video a>.play-icon img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#section05 .lecture_info{width: calc(100% - 330px); padding: 20px 30px;}
#section05 .lecture_info .text_row2{display: block; font-size: 22px; font-weight: 700; line-height: 1.3;height: 2.6em;}
#section05 .lecture_info a:hover .text_row2{text-decoration: underline;}
#section05 .lecture_info .text_row3{margin-top: 15px; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; line-height: 1.6; text-align: left; height: 4.8em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px;}
#section05 .popup_zone{width: calc(50% - 40px );}
#section05 .popup_wrap{position: relative;}
#section05 .popup_img{ width: 100%; height: 400px ;}
#section05 .popup_img img{ width: 100%; height: 100% ;}
#section05 .popup_wrap .popup-btn{position: absolute;border: none; height: 28px; padding: 0 8px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .4); bottom: 0; right: 0; cursor: pointer; }


/* section06 */
#section06 .snsWrap_swiper
#section06 .sub_title::before{content: '#'; color: #a70638; font-weight: 900;}
#section06 .social_icon{position: relative;}
#section06 .social_icon img{position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; z-index: 10;}
#section06 .feed_img{position: relative; padding: 50%;}
#section06 .feed_img img{object-fit: cover; height: 100%; position: absolute; width: auto; top:50%; left: 50%; transform: translate(-50%,-50%);} 
#section06 .layer_icon {position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; z-index: 10; font-size: 18px; line-height: 26.5px; text-align: center; color: #fff; border-radius: 50%; background: rgba(0, 0, 0, .85); opacity: .5;}
#section06 .layer_icon>span{line-height: 32px; font-size: 18px;}
#section06 .sns_item {height: calc((100% - 1px) / 2) !important;}
#section06 .sns_item:hover .sns_overlay{opacity: 1;}
#section06 .sns_overlay{transition: opacity .4s ease-in-out; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, .5); z-index: 11; opacity: 0; transition: opacity .4s ease-in-out;}
#section06 .sns_overlay .center_icon{position: absolute; width: 40px; height: 40px; background: rgba(0, 0, 0, .3); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 16px; line-height: 42.85px; color: #ffffff40; }
#section06 .sns_overlay .center_icon:hover{color: #23a8e052; background: rgba(0,0,0,.8);}
#section06 .media_desc{position: absolute; width: 100%; overflow: hidden; padding: 15px; box-sizing: border-box; top: 0; z-index: 12; display: none;}
#section06 .sns_item:hover .media_desc{display: block;}
#section06 .media_desc>div{color: rgba(255, 255, 255, .9);}
#section06 .media_desc .media_left{padding-right:10px; overflow: hidden;}
#section06 .media_desc .media_left h3{font-size: 15px; color: #fff; line-height: 150%; height: 24px; font-weight: bold;}
#section06 .media_desc .media_left>span{margin-right: 10px; font-size: .8em;}
#section06 .media_desc .media_left .taglive{font-size: 13px; display: inline-block; opacity: 0.8;}
#section06 .media_desc .media_left .taglive>i{margin-right: 5px; }
#section06 .media_desc .media_left .taglive>.taglive_icon::before{margin-right: 2px; color: #222;}
#section06 .media_text{font-size: 1em; line-height: 140%; padding: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; }
#section06 .swiper_next, #section06 .swiper_prev{width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .3); cursor: pointer; color: #fff; position: absolute; top:50%; transform: translateY(-50%); z-index: 13;}
#section06 .swiper_next{right: 10px}
#section06 .swiper_prev{left: 10px;}
#section06 .swiper_prev span{margin: 5px 0 0 5px;}
#section06 .swiper_next span{margin: 5px 0 0 7px;}
#section06 .swiper-pagination-bullets.swiper-pagination-horizontal{margin-top: 20px; text-align: center;}
#section06 .swiper-pagination-bullet{width: 10px; height: 10px; background: #23a8e0;}

/* footer */
#footer .inner_wrap{position: relative;}
#footer .footer_top .familySite_wrap{position: absolute; right: 0; top: 42px;}
#footer .footer_top .cont_select{position: relative; width: 338px;}   
#footer .footer_top .btn_select{position: absolute; border: none; border-bottom: 1px solid #ddd; width: 100%; height: auto; color: #555; background: url(../img/icon/arrow3.png)no-repeat right 9px center; text-align: left; font-size: 15px; cursor: pointer; padding: 15px 0;box-sizing: border-box; line-height: 14px; }   
#footer .footer_top .btn_select.on{background: url(../img/icon/arrow3_up.png)no-repeat right 9px center;}
#footer .footer_top .btn_select:hover{outline: 3px solid #F8E4FF;}
#footer .footer_top .familyList{ display: none;  position: absolute; width: 100%; top: 49px; left: 0; border: 1px solid #c4c4c4; box-sizing: border-box; box-shadow: 4px 4px 14px rgba(0, 0, 0, .15); background: #fff;}
#footer .footer_top .familyList li{height: 30px; padding: 5px 8px; box-sizing: border-box;}
#footer .footer_top .familyList li a{font-size: 14px; line-height: 1.6; letter-spacing: -1.2px; font-family: 'Pretendard';}
#footer .footer_top .btn_select.on .familyList{  display: block; }

#footer .footer_bottom .footerList{list-style: none; font-weight: 600; margin: 30px 0; display: flex;}
#footer .footer_bottom .footerList a:hover{color: #23a8e0;}
#footer .footerList li~li{margin-left:20px ;}
#footer .footer_bottom .footer_cont{display: flex;justify-content: space-between;font-size: 15px;}
#footer .footer_bottom .footer_cont_left>div address{font-style: normal; color: #555; margin-right: 20px; display: inline-block;}
#footer .footer_bottom .footer_cont_left>div span{color: #555; margin-right: 20px; display: inline-block;}
#footer .footer_bottom .footer_cont_left>div span:last-child{margin-right: 0;}
#footer .footer_bottom .footer_cont_left>div span:nth-child(3){margin-right: 4px;}
#footer .footer_bottom .footer_cont_right{display: flex; flex-shrink: 0; gap:32px;justify-content: end;}
#footer .footer_bottom .footer_cont_right .seoul_box{width: 210px; height: 70px;}
#footer .footer_bottom .footer_cont_right .wa_mark{width: 80px; height: auto;}

/* common_popup */
.common_popup{display: none;  position: fixed; width: 100%; max-width: 1086px; height: 80vh; background: #fff; border: 1px solid #eee; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10000;} 
.common_popup .modal_header{padding: 25px 0; position: relative; border: 1px solid #eee;}
.common_popup h3{font-weight: 700; font-size: 22px; text-align: center; display: block;}
.common_popup .modal_close{position: absolute; border: none; background: transparent; right:40px; top: 50%; transform:translateY(-50%); cursor: pointer;}
.common_popup .modal_content{overflow-y: scroll; display: flex; height: calc(80vh - 88px); align-items: baseline; }
.common_popup .modal_content ul{display: flex; flex-wrap: wrap;}
.common_popup .modal_content ul li{width: 33.33%; border: 1px solid #fff;}

@media screen and (max-width:1439px){
    #content{padding-top:80px}
    #header{padding-top: 0;}
    #header .nav_wrap{height: 70px;}
    .header_Top{display: none;}
    #gnb{display: none;}
    #header .nav_wrap h1{position: relative; width: 100%; left: 0; top: 50%; transform: translateY(-50%);}
    #header .nav_wrap h1 a:first-child{display: inline-block; width: 27px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    #header .nav_wrap h1 a:last-child{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0;} 
    #header .nav_wrap h1 a:last-child img{width: 130px; }
    #header .searchBtn{right: 60px; line-height: 0;}
    .mobile{display: block;}

    #gnb >.depth1>li{width: 100%; }
    #gnb >.depth1>li~li{margin-left: 0; border-top: 1px solid #e0e0e0;}
    #gnb >.depth1>li>a{display: block; line-height: 50px; font-size: 17px; padding-left: 20px; text-align: left; position: relative;}
    .header_search_layer.on{top: 0;}
    .header_search_layer .search_closeBtn{right: 25px; }
    .header_search_layer .search_bar{padding: 0 25px;}
    .header_search_layer .search_bar input{font-size: 14px;}
    .header_search_layer .search_bar button{right: 30px;}
    #footer .familySite_wrap {right: 15px;}
    #footer .footer_top .cont_select {width: 323px;}

}

@media screen and (max-width:1400px){
    #section03 .notice_list{flex-wrap: wrap;}
    #section03 .notice_list li{width: 100%; border-bottom:1px solid #e4e4e4 ; padding: 24px 0 20px 0;}
    #section03 .notice_list li~li{ border-left:none}
    #section03 .notice_list li:first-child{border-top:1px solid #e4e4e4  ; }
    #section04 .tab_slide_content{width: 100%; padding: 25px; bottom: 40px; position: inherit; top: auto;}
    #section04 .tab_slide{padding: 80px 0 150px 0; position: inherit;}
    #section04 h2{word-break: keep-all; margin-bottom: 45px; font-size:28px}
    #section05 .inner_wrap{flex-wrap: wrap;}
    #section05 .special_lecture{width: 100%;}
    #section05 .lecture_box ul li{flex-wrap: wrap;}
    #section05 .lecture_box .lecture_video{width: 100%;}
    #section05 .lecture_box .lecture_info{width: 100%; padding: 20px 0;}
    #section05 .popup_zone{width: 100%; margin-top: 80px; margin-bottom: 70px;}
    #section05 .popup_zone .popup_img{height: auto;}
    

}
@media screen and (max-width:767px){
    #content section{margin: 40px 0;}
    #section01 .swiper_wrap{height: 450px; background-size: 800px; background-position: center bottom;}
    #section01 .inner_wrap>div{margin-top: 0;}
    #section01 .inner_wrap>div>h3{font-size: 40px; line-height: 1.3;}
    .main_quick_menu{display: none;}
    #section01 .controller_wrap{top: 190px;}
    #section01 .swiper-slide{height: 450px; background-size: 800px;}
    #section02 .swiper-slide{height: 400px;}
    #section02 .swiper-slide .book_info{bottom: 0;}
    #section02 .swiper-slide .book_info em{text-align: left; margin-top: 15px; font-size: 18px;}
    #section02 .swiper-slide .book_info span{text-align: left; font-size: 14px;}
    #section02 .swiper-slide a{transform: translate(calc(-50%), calc(-50% - 60px)) ;}
    #section03 .notice_list .notice_link>a {font-size: 16px;}
    #section04 h3{font-size: 22px;}
    #footer {padding: 40px 0 140px 0;}
    #footer .footer_top .cont_select {width: 200px;}
    #footer .footer_bottom .footerList{flex-wrap: wrap; margin: 15px 0;}
    #footer .footer_bottom .footerList li{margin: 8px 0; width: 100%;}
    #footer .footer_bottom .footer_cont{flex-direction: column;}
    #footer .footer_bottom .footer_cont_left>div address{display: block;}
    #footer .footer_bottom .footer_cont_left>div span{display: block;}
    #footer .footer_bottom .footer_cont_right{margin-top: 20px; gap: 20px; justify-content: start;}
}