@charset "utf-8";
/* CSS Document */
/* com2zoa design KYJ 26.01.12 */

/******** Common ********/ 
html,body{margin:0}
.mobile_bg {display: none; position: fixed; width: 100%; height: 100%;  left: 0; top: 0; background: #000; z-index:400}
.clear_fix::after{content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
a{text-underline-offset:3px}

/* Layout */
#wrap {position: relative; width: 100%; min-width: 320px; font-family:'NSQ'; font-weight: 500}
#content{position: relative; z-index:1}
#mainheader {z-index: 100} 

/*Mainheader */
.header_top{z-index: 1000} 
.header_top .logo_top{position: absolute; top:28px; left:34px; height:46px}
.header_top .logo_top a{display: block; width: 340px; height: 35px; background:url(../images/main/logo.png) no-repeat left center}
.header_top .logo_top span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
/*상단버튼*/ 
.header_top .top_btn_area{position: absolute; top:0; right:0; width: 495px; border-left:1px solid rgba(255,255,255,0.4)}
.header_top .qmenu{display: flex; justify-content:space-between}
.header_top .mem_btnbx{display: flex;  justify-content: space-between; width: 400px}
.header_top .mem_btnbx > p{flex: 1; align-content: space-around; text-align: center}
.header_top .mem_btnbx a{display: block; color:#fff; font-size: 18px}  
.header_top .mem_btnbx a span{padding-left: 30px; background-repeat: no-repeat; background-position: left center}
/*각 버튼 아이콘 지정*/
.header_top .qmu_login a span{background-image:url(../images/main/ico_login.png)}
.header_top .qmu_join a span{background-image:url(../images/main/ico_join.png)}
.header_top .qmu_srch a span{background-image:url(../images/main/ico_srch.png)}
 /*사이트 맵*/
.header_top .qmenu .qmu_site{background: rgba(255,255,255,0.4)}
.header_top .qmenu .qmu_site a{display: block; width: 95px; height: 95px; background:url(../images/main/btn_site.png) no-repeat center}
.header_top .qmenu .qmu_site span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}

/* visual */   
.visual_wrap{position:relative;width:100%;height:100dvh;height:100svh;height:100vh; overflow:hidden}
.visual_wrap .ai_video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual_wrap .visual_img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual_wrap .visual_img img{display:block; width:100%; height:100%; animation: imgzoom 7s ease-in-out infinite alternate; will-change: transform}

/* 비주얼 텍스트 */
.visual_wrap .vtxt_bx{position:relative;width:100%;height:100%}
.vtxt_bx::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3)}
.vtxt_bx .vtxt_item{ position:absolute; top:50%; right:5vw; transform:translateY(calc(-50% + 130px)); color:#fff;text-align:right;z-index:10}
.vtxt_bx .vtxt_item > p{margin-bottom: 15px}
.vtxt_bx .vtxt_item .slogan{margin-bottom: 40px; font-size: 30px}
.vtxt_bx .vtxt_item .slogan span{font-weight: 700}
.vtxt_bx .vtxt_item .stname{font-size: 62px; font-weight: 700}
.vtxt_bx .vtxt_item .engtxt{font-size: 20px; letter-spacing:0.15px}
/*비주얼 동영상 컨트롤*/
.video_control{position:absolute;bottom:50%;right:5vw; width: 40px; height: 40px; margin-bottom: -280px; background:url(../images/main/video_play.png) no-repeat center; cursor:pointer;font-size:0; z-index:20} 
/*재생중*/
.video_control.playing{background:url(../images/main/video_stop.png) no-repeat center}

/********************************************* Layout **********************************************/

/***Content  Common***/    
.visual_conline{position: relative; height: 92px; width: 100%; margin-top:-92px; z-index: 1000}
.conbx_bg{background:url(../images/main/bg_conbx.png) bottom no-repeat}

/* Poplayer */
/*팝업레이어 노출시 컨텐츠위로 가려져서 버튼클릭 안될시에는 .popup_on{display:none}/.popup_on.active {display:block} 주면됨 */
.content_poplayer{position:relative; z-index:100}
.main_openpop{position: relative}
.main_openpop .popup_on{display:none}
.main_openpop .popup_on.active {display:block}
.main_openpop .poptit{margin: 25px 18px; padding-left: 23px; background:url(../images/main/ico_poptit.png) left center no-repeat; font-size: 17px; color:#fff; font-weight:800}
.main_openpop .poptit span{color:#ffd25a; font-weight: bold}
.main_openpop .popup_on{position: absolute; top:-405px; left:0; width:310px; height: 390px; background:rgba(255,255,255,.3)}
.main_openpop .popup_on.active {display:block}
.main_openpop .popup_layer_wrap{ position: relative; text-align: center}
/*버튼*/
.main_openpop .popup_open a{display:block; position: absolute; top:0; left:0; width:310px; height:92px; line-height: 92px; padding:0 23px; background:rgba(255,255,255,.3); font-size: 20px; font-weight: 700; color:#fff; box-sizing: border-box; z-index:1000} 
.main_openpop .popup_open a .popup_hide{position: relative; display:block; padding-left: 36px; background:url(../images/main/ico_popup.png) left center no-repeat}
.main_openpop .popup_open a .popup_hide::after,
.main_openpop .popup_open.openact a .popup_hide::after{display: block; content: ''; clear: both; position: absolute; top:40px; right:0; width:14px; height: 11px; }
.main_openpop .popup_open a .popup_hide::after{background:url(../images/main/pop_open.png) center no-repeat}
.main_openpop .popup_open.openact a .popup_hide::after{background:url(../images/main/pop_close.png) center no-repeat}
/*이동 버튼*/
.main_openpop button{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px; cursor: pointer}
.main_openpop .slick-prev,
.main_openpop .slick-next{position: absolute;top:-48px; width:36px; height:30px; background-color:rgba(255,255,255,.5); background-position:center; background-repeat: no-repeat;   z-index: 500}
.main_openpop .slick-prev {right:55px; border-radius: 15px 0 0 15px; background-image:url(../images/main/btn_laypop01.png)}
.main_openpop .slick-next {right:18px; border-radius: 0 15px 15px 0; background-image:url(../images/main/btn_laypop02.png)}
/*이미지 사이즈 및 폰트조정*/
.main_openpop .popup_layer{position: relative; box-sizing: border-box}
.main_openpop .popup_imgsize{width: 273px; height:305px; margin: 0 auto; border-radius: 10px;  background:url(../images/main/no_popup.jpg) no-repeat center center #e9e9e9; box-shadow:0 0 5px rgba(0, 0, 0, 0.1)}
.main_openpop .popup_imgsize img{width: 273px; height:305px; border-radius: 10px}
.main_openpop .popup_layer .popup_tit{display:block; padding: 12px 30px; background: #3d5059}
.main_openpop .popup_layer .popup_tit a{display:block; overflow:hidden; color:#fff; font-size: 15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap}
.qmu_popup a span{font-size:0}
 
/*공지사항*/
.notice_wrap{position: relative; /*margin-left: 310px;*/ height: 92px; background:rgba(0,0,0,.4)}
.notice_wrap .tit{padding-left: 32px; line-height: 92px; font-size: 20px; color:#fff; font-weight:800}
.notice_wrap .tit span{padding-left: 40px; background:url(../images/main/ico_notice.png) left center no-repeat}
/*공지 리스트*/
.notice_wrap .noti_lstbx{position: relative; height: 92px; padding: 30px 0;  margin: -92px 94px 0 180px; box-sizing: border-box}
.notice_wrap .noti_lst{margin-right: 94px}
.notice_wrap .noti_lst a{display:block; width: 90%; overflow:hidden; text-overflow:ellipsis;  white-space:nowrap; font-size: 17px; color:#fff}
.notice_wrap .noti_lst a .depart{display:inline-block; height: 32px; line-height: 32px; padding: 0 25px; margin-right: 15px; border-radius: 50px; background:  rgba(255,255,255,.4); font-size: 16px; transition: all .4s}
.notice_wrap .noti_lst a:hover{text-decoration: underline}
.notice_wrap .noti_lst a:hover .depart{background: #fff; color:#000}
/*이동버튼*/
.notice_wrap .noti_btn{position: absolute; top:0; right:0; width: 94px; height: 92px; border-left:1px solid rgba(255,255,255,.4)}
.notice_wrap .noti_btn li a{display: block; width: 94px; height: 46px; transition: .4s}
.notice_wrap .noti_btn li a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.notice_wrap .noti_btn li a.noti_prev{background:url(../images/main/noti_prev.png) center no-repeat}
.notice_wrap .noti_btn li a.noti_next{background:url(../images/main/noti_next.png) center no-repeat}
.notice_wrap .noti_btn li a:hover{opacity: 0.4}
/*더보기*/
.notice_wrap .more{position: absolute; top:0; right:0}
.notice_wrap .more a{position: relative; display: flex; justify-content: center; align-items: flex-end; width: 94px; height: 92px; background:rgba(255,255,255,.4); font-size: 15px; color:#fff; font-weight: 700; text-align: center; transition: all .3s}
.notice_wrap .more a span{display: block; padding-bottom: 24px}
.notice_wrap .more a::after{display: block; content: ''; clear: both; position: absolute; top:25px; right:50%; width:12px; height: 12px; margin-right: -5px; background:url(../images/main/noti_more.png) center no-repeat; transition: all .3s}
.notice_wrap .more a:hover::after{transform: rotate(180deg)} 
.notice_wrap .more a:hover{background:rgba(255,255,255,.2)}

/*자주찾는 서비스*/
#main_quick{background:linear-gradient(100deg, #e9f1f7 10%, #f5f4f7 100%)}
#main_quick .quick_wrap{position: relative; background:url(../images/main/bg_quick.png) center no-repeat}
#main_quick .quick_wrap::after{display: block; clear: both; content: ''; position: absolute; bottom:0; right:0; width:247px; height: 193px; background:url(../images/main/bg_quickai.png) center no-repeat}
/*타이틀*/
.quick_wrap .titbx{padding: 60px 10px 0}
.quick_wrap .titbx .engtit{margin-bottom: 18px; font-size: 20px; color:#8b8b8b; font-weight: 600}
.quick_wrap .titbx .bigtit{font-size: 25px; font-weight: 800}
/*바로가기 목록*/
.quick_wrap .quick_bx{position: relative; width: 1600px; margin:0 auto; z-index: 1}
.quick_wrap .quick_lst{padding:40px 0 60px}
.quick_wrap .quick_lst ul{display: flex; flex-wrap: wrap; justify-content: space-between; gap:30px}
.quick_wrap .quick_lst ul li{flex: 1}
.quick_wrap .quick_lst ul li a{overflow:hidden; display: block; height: 98px; background: #fff; border-radius: 10px; box-shadow:0 0 10px rgba(0, 0, 0, 0.05); align-content: space-around; text-align: center}
.quick_wrap .quick_lst ul li a img{transition: all .4s}
.quick_wrap .quick_lst ul li a:hover img{transform: scale(1.1)}

/*월별 소식*/ 
#main_calendar .cal_wrap{position: relative; width: 1600px; height: 490px; margin: 0 auto}
/*타이틀*/
.cal_wrap .titbx{width: 370px; height: 490px; padding: 137px 0 0 10px; border-right:1px solid #e5e5e5; box-sizing: border-box}
.cal_wrap .titbx .engtit{margin-bottom: 18px; font-size: 20px; color:#8b8b8b; font-weight: 600}
.cal_wrap .titbx .bigtit{font-size: 25px; font-weight: 600; line-height: 160%}
.cal_wrap .titbx .bigtit span{font-weight: 800}
.cal_wrap .titbx .bigtit span span.poin_col{color:#347ec2}
/*이동버튼*/
.cal_wrap .btn_bx{position: absolute; left:340px; top:180px}
.cal_wrap .btn_bx li:first-child{margin-bottom: 8px}
.cal_wrap .btn_bx li button{width: 56px; height: 56px; border:3px solid #e5e5e5; border-radius: 50px; background: #fff; box-sizing: border-box; transition: all .3s}
.cal_wrap .btn_bx li button img{transition: all .3s}
.cal_wrap .btn_bx li button:hover{background: #4e697b; border-color:#4e697b}
/*더보기 버튼*/
.cal_wrap .more{position: absolute; left:10px; bottom:108px}
.cal_wrap .more a{position: relative; display: block; width: 260px; height: 56px; padding: 10px 10px 10px 20px; border-radius: 50px; background:linear-gradient(100deg, #344754 10%, #698ea6 100%); font-size: 18px; font-weight: 600; color:#fff; box-sizing: border-box; align-content:space-around}
.cal_wrap .more a::after{display: block; clear: both; content: ''; position: absolute; top:10px; right:10px; width:46px; height: 36px; background:url(../images/main/cal_more.png) left center no-repeat #fff; border-radius: 50px; transition: all .3s}
.cal_wrap .more a:hover::after{background-position: center}
/*리스트*/
.cal_wrap .cal_area{height: 238px; margin: -350px 0 0 440px}
.cal_wrap .cal_area .cal_bx{overflow: hidden; position: relative; width:256px; height: 238px; margin: 0 auto; background: #fff; border-radius: 10px; border:3px solid #ededed; box-sizing: border-box; transition: all .3s}
.cal_wrap .cal_area .caltop{background: #f6f6f6; margin-right: 10px; border-radius: 0 0 20px 0}
.cal_wrap .cal_area .infobx{display: flex; justify-content: space-between}
.cal_wrap .cal_area .infobx span{display: block; align-content: space-around}
.cal_wrap .infobx .depart{width: 125px; height: 38px; line-height: 38px; background: #4e697b; border-radius:0 0 10px 0; color:#fff; font-weight: 700; text-align: center}
.cal_wrap .infobx .team{margin-right: 10px; font-size: 14px}
.cal_wrap .datebx{display: flex; justify-content:space-between}
.cal_wrap .datebx > span{display: block}
.cal_wrap .datebx .year{width: 80px; height: 25px; line-height: 25px; margin:20px 10px; border-radius: 50px; border:1px solid #d8d8d8; font-size: 14px; text-align: center; transition: all .3s}
.cal_wrap .datebx .date{margin: 18px 12px 14px 0; font-size: 15px; font-weight: 600}
.cal_wrap .datebx .date span{line-height: 25px; font-size: 19px; font-weight: 700}
.cal_wrap .caltxt{overflow:hidden; height: 40px; margin: 25px 12px;  font-size: 15px; line-height: 145%}
.cal_wrap .item_more{position: absolute; bottom:0; right:0}
.cal_wrap .item_more a{display: block; width: 135px; height: 40px; line-height: 43px; border-radius:20px 0 0 0; background: #ededed; font-size: 15px; font-weight: 600; color:#797979; text-align: center; transition: all .3s}
.cal_wrap .item_more a span{padding-right: 23px; background:url(../images/main/cal_lstmore.png) right center no-repeat}
/*리스트 오버*/
.cal_wrap .cal_area .cal_bx:hover{border-color:#4e697b}
.cal_wrap .cal_area .cal_bx:hover .datebx .year{background:#d8d8d8}
.cal_wrap .item_more a:hover{background:#4e697b; color:#fff}
.cal_wrap .item_more a:hover span{background:url(../images/main/cal_lstmore_a.png) right center no-repeat}
/*월별소식 없을 때*/
.nopart{height:238px; background:url(../images/main/bg_nopart.png) center no-repeat; line-height:0; font-size:0; text-indent:-9999999px}


/*  Photo */
#main_album {background:url(../images/main/bg_photo.png) center bottom no-repeat}
#main_album .album_wrap{position: relative; width: 1600px; margin: 0 auto 128px}
/*타이틀*/
.album_wrap .titbx{position: absolute; top:0; right: 0; width: 868px; padding:0 40px 36px; border-bottom: 1px solid #e3e3e3; box-sizing: border-box}
.album_wrap .titbx .engtit{margin-bottom: 18px; font-size: 20px; color:#8b8b8b; font-weight: 600}
.album_wrap .titbx .bigtit{margin-bottom: 18px; font-size: 25px; font-weight: 600; line-height: 160%}
.album_wrap .titbx .bigtit span{font-weight: 800}
.album_wrap .titbx .bigtit span span.poin_col{color:#347ec2}
.album_wrap .titbx .smtit{font-size:17px}
/*이동버튼*/ 
.album_wrap .btn_bx{position: absolute; top:120px; right:66px; z-index: 10}
.album_wrap .btn_bx ul{display: flex; gap:10px}
.album_wrap .btn_bx li button{width: 56px; height: 56px; background: #d7d7d7; border-radius:50px; transition: all .4s}
.album_wrap .btn_bx li button:hover{background: #344854}
/*더보기 버튼*/ 
.album_wrap .more{position: absolute; top:120px; right:0}
.album_wrap .more a{display: block; width: 56px; height: 56px; background: #d7d7d7; border-radius:50px; text-align: center; align-content: space-around; z-index: 10; transition: all .4s}
.album_wrap .more a img{transition: all .4s}
.album_wrap .more a:hover{background: #bcbcbc}
.album_wrap .more a:hover img{transform: rotate(180deg)}
/* 썸네일 */
.album_wrap .photo_area {display: flex; align-items: flex-end; gap: 40px}
.album_wrap .photo_fade {flex: 1; min-width: 0; /*width:875px /* 320 × 3 875 */; padding-bottom:20px }
.album_wrap .photo_fade .slick-list {overflow: hidden}
.album_wrap .photo_fade .slick-track {display: flex;align-items: flex-end}
.album_wrap .photo_fade .slick-slide {/*width: 320px !important;*/display: flex;justify-content: center}
/* 썸네일 이미지 조정 */
.album_wrap .photo_fade .photo {position: relative; overflow: hidden; width: 250px;height: 162px; border-radius:30px 10px 30px 30px; background: #fff}
.album_wrap .photo_fade img {width: 100%;height: 100%;object-fit: cover;border-radius: 12px;opacity: 0.8;transition: opacity 0.3s}
/*.album_wrap .photo_fade .slick-current img {opacity: 1}*/
.album_wrap .photo_fade .photo_bx {padding: 12px 0}
/*썸네일 이미지 타이틀*/
.album_wrap .photo .tit{position: absolute; bottom:0; right:0; width: 165px; height: 30px; background-color:rgba(0,0,0,.3); border-radius: 20px 0 0 0; text-align: center; align-content:space-around; color:#fff; z-index: 10}
/*대표이미지*/
.album_wrap .photo_main {flex-shrink: 0}
.album_wrap .photo_main{position: relative; overflow: hidden; width: 704px;height: auto; border-radius:60px 10px 60px 60px}
.album_wrap .photo_main img {width: 100%; height: 402px; object-fit: cover; border-radius: 20px}
/*대표이미지 이미지 타이틀*/
.album_wrap .photo_main .tit{width:305px; height: 50px; background-color:rgba(0,0,0,.5); border-radius:30px 0 0 0; font-size: 18px; font-weight: 700; color:#fff}

/* Banner */ 
#main_banner{background: #33444f}
.banner_wrap {position: relative; height:134px; margin: 0 auto; padding: 42px 20px 0; box-sizing: border-box}
.banner_wrap .tit{height: 52px; padding:0; color:#4c5459; font-size: 20px; font-weight: 600; color:#fff; align-content: space-around}
.banner_wrap .tit span{padding: 10px 0}
/*배너리스트*/
.banner_wrap .ban_area{margin:-52px 0 0 280px; height: 52px}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 230px; height:52px; margin: 0 auto; border-radius:5px; background:#ccc}
.banner_wrap .ban_item img {margin: 0 auto; width:230px; height:52px; transition: all .5s}
.banner_wrap .ban_item a:hover img{transform: scale(120%)}
/*버튼*/
.banner_wrap .ban_btn{margin: -34px 0 0 110px}
.banner_wrap .ban_btn .btns{display: flex; gap:7px}
.banner_wrap .ban_btn .btns button{width: 34px; height: 18px; border-radius: 50px; background-color:#fff; background-position: center; background-repeat: no-repeat; font-size: 0; text-indent: -9999px; transition: all .3s; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.banner_wrap .ban_btn .btns button.ban_prev{background-image:url(../images/main/ban_prev.png)}
.banner_wrap .ban_btn .btns button.ban_stop{background-image:url(../images/main/ban_stop.png)}
.banner_wrap .ban_btn .btns button.ban_next{background-image:url(../images/main/ban_next.png)}
.banner_wrap .ban_btn .btns button:hover{background-color:#7a848a}
.banner_wrap .more{position: absolute; top:56px; left:260px}
.banner_wrap .more a{width: 16px; height: 16px; padding: 0; background: #dbdbdb; font-size: 0}
.banner_wrap .more a::after{display: block; clear: both; content: ''; position: absolute; top:0; right:0; top:5px; width: 16px; height: 16px; background:url(../images/main/banner_more.png) no-repeat left center}
.banner_wrap .more a:hover{background: #b1b1b1}

/* Footer */
#footwrap{position: relative; background: #3a4c58}
#footwrap .foot_area {margin:0 auto}
/* 유관기관 */
#footwrap .fm_site {position:relative; margin: 0 auto}
#footwrap .fm_site > ul{display: flex; flex-wrap: wrap; gap:40px}
#footwrap .fm_site > ul > li{flex: 1; min-width: 165px; position: relative; box-sizing: border-box}
#footwrap .fm_site .site_tit {position: relative; width:100%; height:52px; line-height:52px; margin: 0 auto}
#footwrap .fm_site .site_tit a { display:block; height:52px; padding:0 52px 0 15px; margin-top: 40px;  box-sizing:border-box; font-size: 16px; font-weight:600; color:#fff; background: #4f5f6a; border-radius: 7px; box-shadow:0 0 10px rgba(0, 0, 0, 0.05) }
#footwrap .fm_site .site_tit.active {border-radius: 0 0 7px 7px}
#footwrap .fm_site .site_tit .fm_arw {display: block; content: " "; clear: both; position:absolute; top:50%; right:15px; width:16px; height:13px; padding:9px 0 0; margin-top:-14px; border-radius:50% 50%; text-align: center; box-sizing: border-box}
#footwrap .fm_site .site_tit.active .fm_arw img{transform: rotate(180deg); transition:.3s ease-in-out}
#footwrap .fm_site .site_lst {overflow:hidden; display:none; position: absolute; height: 0; width:100%; margin:0; border-radius:10px 10px 0 0; background:#eaeaea; border-bottom:0; box-sizing:border-box}
#footwrap .fm_site .site_lst ul {overflow-y:auto; height:130px; padding:10px 10px 0; overflow-x:auto}
#footwrap .fm_site .site_lst ul li {top:-220px; left:0; padding:4px 0; border-bottom:1px solid #ccc}
#footwrap .fm_site .site_lst ul li:last-child{padding-bottom: 0; border-bottom: none}
#footwrap .fm_site .site_lst ul li a {position:relative;  display:block; overflow:hidden; width:100%; padding:5px 40px 5px 10px; text-overflow:ellipsis;  white-space:nowrap; font-weight:400; color:#000;  box-sizing: border-box}
#footwrap .fm_site .site_lst ul li a:after {content:"GO"; display:block; position:absolute; top:50%; right:0; width:30px; height:20px; line-height:20px; margin-top:-10px; background:#5b5b5b;border-radius:50px 50px; text-align: center; color:#fff; font-size: 11px}
#footwrap .fm_site .site_lst {display: block; bottom: 52px; left:0; z-index:5}
#footwrap .fm_site .site_lst ul li:hover a {color:#000; font-weight:400}
#footwrap .fm_site .site_lst ul li:hover a:after {background:#3782df; font-weight:500; transition:all .3s}
/*메뉴*/
#footwrap .mb_menu {display:none}
#footwrap .pc_menu{display: flex; gap:50px; padding: 30px 0; border-bottom: 1px solid #8e9294} 
#footwrap .pc_menu li{position: relative}
#footwrap .pc_menu li::after{content:""; clear:both; display:block; position: absolute; top:5px; right:-25px; width: 5px; height: 5px; background: #687279; border-radius: 50px}
#footwrap .pc_menu li:last-child::after{background: none}
#footwrap .pc_menu li a {font-size:14px; color:#838e96; font-weight:400; transition: all .3s}
#footwrap .pc_menu li a:hover{color:#fff; font-weight:600}
#footwrap .pc_menu li.li_1 a{padding-left: 23px; background:url(../images/main/ico_protect.png) no-repeat left center; font-weight: 600; color: #fff}
#footwrap .pc_menu li.li_1 a:hover{background:url(../images/main/ico_protect_a.png) no-repeat left center; color:#ffe349}
#footwrap .add_area{position: relative; margin: 0 auto; padding: 30px 0; box-sizing: border-box}
/*문의전화 및 주소*/
#footwrap .add{margin-left: 370px}
#footwrap .add address{font-size: 14px; color:#fff; font-weight: 600}
#footwrap .add .add_num{display: flex; gap:20px; margin: 12px 0}
#footwrap .add .add_num dt{font-size: 15px; font-weight: 700; color:#fff; align-content: space-around}
#footwrap .add .add_num dd{font-size: 14px; font-weight: 500; color:#fff; line-height: 160%; align-content: space-around}
#footwrap .add .add_time{font-size: 14px; color:#838e96; font-weight: 600}
#footwrap .add .add_time span{display: block; padding-left: 25px; margin-bottom: 12px; background:url(../images/main/ico_time.png) no-repeat left center}
/*관리자*/
#footwrap .btn_admin{position: absolute; top:-57px; right:0}
#footwrap .btn_admin a{display: block; width:130px; height: 38px; padding:0 15px; line-height: 38px; border-radius:50px; background-image:url(../images/main/ico_adm.png); background-position: left 15px center; background-repeat: no-repeat; background-color:#253038; color: #fff; font-size: 14px; font-weight: 500; text-align: right; box-sizing: border-box; transition: all .3s} 
#footwrap .btn_admin a:hover{background-color: #34a3f3}
/*카운터 */ 
#footwrap .count_box {display:block; position: absolute; bottom:33px; right:0}
#footwrap .count_box ul{overflow: hidden; width:270px; min-height:100px; padding:0 10px; border-radius: 10px; background: #32434e; box-sizing: border-box}
#footwrap .count_box ul li{display: flex; flex: 1; justify-content: space-between; height: 49px; line-height:49px; padding:0 12px;  color:#bfc3c5; box-sizing:border-box}
#footwrap .count_box ul li:last-child{ border-top:1px solid #707579}
#footwrap .count_box ul li .tit{padding-left: 20px; background:url(../images/main/ico_count.png) no-repeat left center}
#footwrap .count_box ul li.today .tit,
#footwrap .count_box ul li.today .num{color:#fff}
/*하단로고*/
#footwrap .foot_logo{position: absolute; top:30px; left:0}
/*카피라이트*/
#footwrap .copy{color:#838e96; line-height: 150%; margin-left: 370px; text-align:left}

/******** MOBILE LAYOUT ********/
@media only screen and (max-width:1024px) {
.skip_navi .pc_skip{display:none} 
.header_top .qmenu .mb_none{display: none}

/* Footer */  
#footwrap{padding:0 10px}
#footwrap .foot_area{position:relative}
/* 유관기관 */
#footwrap .fm_site {position:relative; padding-top: 10px}
#footwrap .fm_site > ul{gap:15px} 
#footwrap .fm_site .site_tit {height:40px; line-height:40px}
#footwrap .fm_site .site_tit a { display:block; height:40px; line-height: 40px; padding:0 40px 0 15px; margin: 0 auto; font-size: 14px; letter-spacing: -1px}
#footwrap .fm_site .site_tit .fm_arw {padding:8px 0 0}
#footwrap .fm_site .site_lst {bottom: 41px}
/*메뉴*/ 
#footwrap .foot_mlst{position: relative}
#footwrap .mb_menu{position: relative; display: block;  margin:0 auto; text-align: center}
#footwrap .mb_menu li{position: relative; display: inline-block; padding:7px 10px; height: 25px; line-height: 25px}
#footwrap .mb_menu li::after {content:""; clear:both; display:block; position: absolute; top:14px; right:-3px; width: 1px; height: 10px; background: #d0d0d0}
#footwrap .mb_menu li:first-child {padding:13px 3px 13px 8px}
#footwrap .mb_menu li:first-child::after, #footwrap .mb_menu li:last-child::after{background:none}
#footwrap .mb_menu li a {display:block; font-size: 13px; font-weight: 400; color:#fff}
#footwrap .mb_menu li.foot_home a{display:block;  padding:5px 0; width: 18px; height: 18px; line-height: 18px; background:url(../images/main/foot_home.gif) no-repeat left 4px}
#footwrap .mb_menu li.foot_home a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#footwrap .pc_menu{display: flex; flex-wrap: wrap; gap:0; padding: 0; border-bottom:none; background: #4f5f6a; border-radius:7px} 
#footwrap .pc_menu li{flex: 1; min-width: 250px; border-right: 1px solid #33444f; border-bottom: 1px solid #33444f; text-align: center; box-sizing: border-box}
#footwrap .pc_menu li::after{display: none}
#footwrap .pc_menu li:last-child::after{background: none}
#footwrap .pc_menu li a {display: block; padding:12px 10px; color:#fff}
#footwrap .pc_menu li a:hover{color:#fff; font-weight:600}
#footwrap .pc_menu li.li_1 a,
#footwrap .pc_menu li.li_1 a:hover{background: none} 
#footwrap .pc_menu li.li_3,
#footwrap .pc_menu li.li_4{display: none}
/*문의전화 및 주소*/
#footwrap .add_area{padding: 20px 0}
#footwrap .add{margin-left: 0; text-align: center}
#footwrap .add address{font-size: 14px}
#footwrap .add .add_num{display: block}
#footwrap .add .add_num dt{margin-bottom: 10px; font-size: 14px}
#footwrap .add .add_num dd{font-size: 13px}
#footwrap .add .add_time{font-size: 13px}
#footwrap .add .add_time span{display:inline-block}
/*관리자*/
#footwrap .btn_admin{display: none}
/*카운터 */ 
#footwrap .count_box{display: none}
/*하단로고*/
#footwrap .foot_logo{display: none}
/*카피라이트*/
#footwrap .copy{margin-left:0; text-align:center}
    
/********************************************* Layout **********************************************/

/***Content  Common***/   
.mb_none{display: none}
.content_area{position: relative}
.conline02 .inside_line{margin:0 10px}

/*월별소식 없을 때*/
.nopart{background-size:248px 81px}


/* Banner */ 
#main_banner{background: #33444f}
.banner_wrap {position: relative; height:120px; margin: 0 auto; padding: 20px 10px 0; box-sizing: border-box}
.banner_wrap .tit{height: 52px; padding:0; color:#4c5459; font-size: 18px; font-weight: 600; color:#fff; align-content: space-around}
.banner_wrap .tit span{padding: 10px 0}
/*배너리스트*/
.banner_wrap .ban_area{margin:-37px 0 0 128px}
.banner_wrap .ban_item a {width: 176px; height:53px}
.banner_wrap .ban_item img {width: 176px; height:53px}
/*버튼*/
.banner_wrap .ban_btn{margin: -18px 0 0 0}
.banner_wrap .more{top:33px; left:134px}
    
}


/******** PC LAYOUT ********/
@media only screen and (min-width:1500px) {
.skip_navi .mb_skip{display:none}
#content{position: relative} 
.header_top .qmenu .pc_non{display: none} 

/*Mainheader*/
.headerwrap{background:rgba(0,0,0,.1); border-bottom:1px solid rgba(255,255,255,0.4)}
/*header-hover*/
.headerwrap:hover{background: #fff; border-bottom: none} 
.headerwrap:hover .header_top .logo_top a{background:url(../images/main/logo_a.png) no-repeat left center}
/*상단버튼*/ 
.headerwrap:hover .header_top .top_btn_area{border-left-color:#ddd}
/*각 버튼 아이콘 지정*/
.headerwrap:hover .header_top a{color:#000}
.headerwrap:hover .header_top .qmu_login a span{background-image:url(../images/main/ico_login_a.png)}
.headerwrap:hover .header_top .qmu_join a span{background-image:url(../images/main/ico_join_a.png)}
.headerwrap:hover .header_top .qmu_srch a span{background-image:url(../images/main/ico_srch_a.png)}
/*사이트 맵*/
.headerwrap:hover .header_top .qmenu .qmu_site{background: #303d4a}
/*메뉴*/
.headerwrap:hover #gnb .navi_tit a{color:#000}

/* gnb */ 
#gnb .allbtnclose, #gnb .mbl_area {display: none}
#gnb .navi_sub {display:none; box-shadow:0 3px 5px rgba(0, 0, 0, 0.1)}
#gnb .gnb_topbx {display:none}
#main_menu .active .navi_sub {display:block}
#main_menu li h3:hover {position:relative} 
#gnb .gnb_list {max-width:100%; margin:0 auto; padding:0 495px 0 400px; box-sizing: border-box}
#gnb .gmn {float:left; width: 16.5%; height:95px; line-height:95px; box-sizing: border-box}
#gnb .navi_tit a {position: relative; display: block; text-align: center; font-size: 20px; font-weight: 500; color:#fff}
#gnb .gmn:hover .navi_tit a {color:#0072bc; font-weight: 700}
#gnb .gmn:hover .navi_tit a::before,
#gnb .gmn.active .navi_tit a::before{display: block; content:""; clear: both; position: absolute; top:15px; left:50%; width:28px; height:10px; margin-left:-15px; background:url(../images/main/ico_gnb.png) no-repeat center}
#gnb .navi_sub {position:absolute; top:94px; left:0; width:100% !important; border-top:1px solid #ddd; background:#fff; z-index:1000}
#gnb .sub_boxwrap {position: relative}
#gnb .sub_boxwrap:before {content:""; display: block; position:absolute; top:0; left:0; width:10%; height:100%; background:#1f87c9}
#gnb .sub_box{overflow:hidden; position: relative; max-width:100%; min-height:300px; margin:0 auto; z-index:100}
#gnb .mn_box {max-width:100%} 
#gnb .mn_box .mn_boxsubtit {display:block; font-size:13px; color:#60747f; font-weight:500; line-height: 150%; text-align: left}
/*메뉴리스트*/
#gnb .mn_box > ul {display: flex; flex-wrap: wrap; padding:0 20px 0 440px; margin:0}
#gnb .mn_box > ul:nth-of-type(1) {padding:30px 20px 0 440px}
#gnb .mn_box li.third_list {width:25%; margin-bottom: 10px}
#gnb .mn_box li.third_list .third_mubox {padding:0 8px; transition: all .5s}
#gnb .mn_box li.third_list .third_tit a{display: block; min-height:30px; line-height:150%; padding:13px; margin-bottom:15px; border-radius:10px; word-break: keep-all; border:1px solid #dadada; font-size:16px; font-weight:600; color:#000; box-sizing: border-box; transition: .3s}
/*세번째 메뉴*/
#gnb ul.detail_lst {width:auto; padding:8px}
#gnb ul.detail_lst li {position: relative; padding-left: 15px; margin-bottom:8px; line-height:160%; text-align:left}
#gnb ul.detail_lst li::after{display: block; content: ''; clear: both; position: absolute; top:9px; left:0; width:7px; height: 2px; background: #acacac}
#gnb ul.detail_lst li:last-child{margin-bottom: 0}
#gnb ul.detail_lst li a {display:inline-block; font-size: 15px; color:#262626; font-weight:400}
#gnb ul.detail_lst li:hover a {color:#0072bc; font-weight:600; transition: all .1s}
#gnb ul.detail_lst li:hover::after{background: #0072bc}
/*세번째 메뉴 오버시*/
#gnb .mn_box li.third_list .third_tit:hover a,
#gnb .mn_box li.third_list:hover .third_tit a {border-color: #558aab; background:#558aab; color:#fff}
/*새창 메뉴*/
#gnb .mn_box li.third_list .third_tit > a[target="_blank"] span {display:inline-block; padding-right:22px; background: url(../images/main/btn_blank.png) right 0 top 50% no-repeat}
#gnb .mn_box li.third_list:hover .third_tit>a[target="_blank"] span {background: url(../images/main/btn_blank_a.png) right 0 top 50% no-repeat}
/*왼쪽 타이틀 영역*/
#gnb .mn_boxleft {position:absolute; top:0; left:0; width:420px; height:100%; padding: 32px; background:linear-gradient(100deg, #222d35 10%, #558aab 100%);  box-sizing: border-box}
#gnb .mn_boxleft::after{display: block; content: ''; clear: both; position: absolute; bottom:0; left:300px; width:109px; height:87px; background:url(../images/main/gmn_ai.png) no-repeat right bottom}
#gnb .mn_box .mn_boxtit {color:#fff; font-size:35px; font-weight:600; box-sizing: border-box}
    
/********************************************* Layout **********************************************/
/***Content  Common***/  
/* Banner */  
.banner_wrap {width: 1600px; padding: 42px 10px 0; box-sizing: border-box}  
    
/* Footer */
#footwrap .foot_bx{width: 1600px; margin: 0 auto; box-sizing: border-box}
}

/**** LOWSET FIX ****/
@media only screen and (min-width:1500px) {
/* Menu FIX */
.top_bar_fix{position:absolute; top:0; left:0; width:100%; z-index:1000; transition: 0.6s}
.fixed{position:fixed; top:0; left:0; width:100%; height: 94px; padding-left:0; background:rgba(255,255,255,0.95); box-shadow:0 3px 5px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap{height: 94px; background:none} 

/*Mainheader*/
.fixed .headerwrap{background:#fff; border-bottom:1px solid rgba(255,255,255,0.4)}
.fixed .headerwrap .header_top .logo_top a{background:url(../images/main/logo_a.png) no-repeat left center}
/*상단버튼*/ 
.fixed .headerwrap .header_top .top_btn_area{border-left-color:#ddd}
/*각 버튼 아이콘 지정*/
.fixed .headerwrap .header_top a{color:#000}
.fixed .headerwrap .header_top .qmu_login a span{background-image:url(../images/main/ico_login_a.png)}
.fixed .headerwrap .header_top .qmu_join a span{background-image:url(../images/main/ico_join_a.png)}
.fixed .headerwrap .header_top .qmu_srch a span{background-image:url(../images/main/ico_srch_a.png)}
/*사이트 맵*/
.fixed .headerwrap .header_top .qmenu .qmu_site{background: #303d4a}
/*메뉴*/
.fixed .headerwrap #gnb .navi_tit a{color:#000}
}

/********* TABLET LAYOUT[ 1024px ~ 1900 중간사이즈 조정관련] *********/
@media only screen and (min-width:1501px) and (max-width:1850px) {
/* gnb */ 
#gnb .mn_box li.third_list .third_tit a{min-height:70px; padding:10px; font-size:15px; align-content: space-around}
}

@media only screen and (min-width:1024px) and (max-width:1850px) {
/*Mainheader*/
.header_top .logo_top{top:34px; left:20px; height:28px}
.header_top .logo_top a{display: block; width: 272px; height: 28px; background-size: 272px 28px}
.headerwrap:hover .header_top .logo_top a{background-size: 272px 28px}
.fixed .headerwrap .header_top .logo_top a{background-size: 272px 28px}
/*상단버튼*/ 
.header_top .top_btn_area{width: 340px}
.header_top .mem_btnbx a{font-size: 15px}  
/*사이트 맵*/
.header_top .qmenu .qmu_site a{display: block; width: 60px; height: 95px}

/* gnb */ 
#gnb .gnb_list {max-width:100%; margin:0 auto; padding:0 325px 0 300px; box-sizing: border-box}
#gnb .navi_tit a {font-size: 18px} 
}

@media only screen and (max-width:1620px) {
/* Banner */  
.banner_wrap {width: auto}  
.banner_wrap .more{left:273px}
/* Footer */
#footwrap .foot_bx{width: auto; margin: 0 20px}
}

@media only screen and (max-width:1700px) {
/*자주찾는 서비스*/ 
#main_quick .quick_wrap{background:url(../images/main/bg_quick_m.png) top center no-repeat}
#main_quick .quick_wrap::after{display: none}
/*타이틀*/
.quick_wrap .titbx{padding: 20px 20px 0}
.quick_wrap .titbx .engtit{margin-bottom: 10px; font-size: 15px}
.quick_wrap .titbx .bigtit{font-size: 20px}
/*바로가기 목록*/
.quick_wrap .quick_bx{width:auto}
.quick_wrap .quick_lst{padding:18px}
.quick_wrap .quick_lst ul{gap:20px}
.quick_wrap .quick_lst ul li a{height: 65px}
.quick_wrap .quick_lst ul li a img{transform: scale(0.6)}
.quick_wrap .quick_lst ul li a:hover img{transform: scale(0.7)}
    
/*월별 소식*/ 
#main_calendar .cal_wrap{width:auto; height: 346px}
/*타이틀*/
.cal_wrap .titbx{width: 280px; height: 346px; padding: 50px 0 0 15px}
.cal_wrap .titbx .engtit{margin-bottom: 15px; font-size: 16px}
.cal_wrap .titbx .bigtit{font-size: 20px}
/*이동버튼*/
.cal_wrap .btn_bx{left:252px; top:100px}
/*더보기 버튼*/
.cal_wrap .more{left:10px; bottom:55px}
.cal_wrap .more a{width: 215px; height: 56px; font-size: 16px}
/*리스트*/
.cal_wrap .cal_area{height: 238px; margin: -300px 0 0 340px}

/*AI교육원 시설안내*/ 
#main_album{background:none}
#main_album .album_wrap{position: relative; width: auto; margin: 0 auto 60px}
/*타이틀*/
.album_wrap .titbx{position: relative; top:0; right: 0; width:auto; padding:0 15px 30px; margin:0 10px 0 445px}
.album_wrap .titbx .engtit{margin-bottom: 10px; font-size: 16px}
.album_wrap .titbx .bigtit{margin-bottom: 5px; font-size: 20px}
.album_wrap .titbx .smtit{font-size:15px}
/*이동버튼*/ 
.album_wrap .btn_bx{top:88px; right:60px} 
.album_wrap .btn_bx li button{width: 40px; height: 40px}
/*더보기 버튼*/ 
.album_wrap .more{top:88px; right:10px}
.album_wrap .more a{width: 40px; height: 40px}
/* 썸네일 */ 
.album_wrap .photo_area {gap:10px}
.album_wrap .photo_area::after{display: block; content:''; clear: both; position: absolute; bottom:-20px; left:0;  width: 100%; height:120px; background: linear-gradient(100deg, #344754 10%, #698ea6 100%)}
.album_wrap .photo_area .photo_lst{position: relative; z-index: 1}
.album_wrap .photo_fade { padding-bottom:0; margin-bottom: -12px}
/* 썸네일 이미지 조정 */
.album_wrap .photo_fade .photo {width: 200px;height: 130px}
/*대표이미지*/
.album_wrap .photo_main {position: relative; z-index: 1; margin: -110px 0 0 15px}
.album_wrap .photo_main{width: 417px}
.album_wrap .photo_main img {width: 100%; height: 268px}
/*대표이미지 이미지 타이틀*/
.album_wrap .photo_main .tit{font-size: 16px}
}

@media only screen and (max-width:1500px) {
/*Mainheader */
.header_top{position: absolute; top:0; left:0; width: 100%; height: 45px; border-bottom:1px solid rgba(255,255,255,0.4)} 
.header_top .logo_top{position: absolute; top:10px; left:10px; width: 223px; height:23px}
.header_top .logo_top a{display: block; width:223px; height: 23px; background-size: 223px 23px}
/*상단버튼*/ 
.header_top .top_btn_area{ width:auto}
 /*사이트 맵*/
.header_top .qmenu .qmu_site a{display: block; width: 45px; height: 45px; background-size: 18px 15px}
/*상단버튼*/ 
.fixed .headerwrap .header_top .top_btn_area{border-left:1px solid rgba(0,0,0,0.4)}
.fixed .headerwrap .header_top .mem_btnbx a{display: block; color:#000}   
/*각 버튼 아이콘 지정*/
.fixed .headerwrap .header_top .qmu_login a span{background-image:url(../images/main/ico_login_a.png)}
.fixed .headerwrap .header_top .qmu_join a span{background-image:url(../images/main/ico_join_a.png)}
.fixed .headerwrap .header_top .qmu_srch a span{background-image:url(../images/main/ico_srch_a.png)}
    
/* Mobile fix */
.fixed .headerwrap .header_top{position:fixed; top:0; left:0; width:100%; min-width: 320px; height: 45px; background: #fff; border-bottom: none; transition: 0.6s; box-shadow:0 3px 5px rgba(0, 0, 0, 0.1)}
.fixed .headerwrap .header_top .logo_top a{width:223px; height: 23px; background:url(../images/main/logo_a.png) no-repeat left center; background-size: 223px 23px !important}
.fixed .headerwrap .header_top .qmenu .qmu_site{background: #303d4a}

/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0; width: 100%; height:100%; min-height:100%; min-width: 320px; background:#fff; z-index:1000; overflow-y:auto; box-sizing:border-box}
.gnb_topbx{background: #33444f}
#gnb p.mb_gnbtit{display: block; height:50px; line-height: 50px; font-size:18px; font-weight:500; color:#fff}
#gnb p.mb_gnbtit span{padding-left:15px}
/*GNB_상단*/
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:20px; right:23px;  width: 12px; height: 12px; overflow: hidden; background: url(../images/main/btn_menu_close.png) no-repeat left top; font-size:0; line-height:0; text-indent:-9999px}
/*GNB_메뉴버튼*/
#gnb .mbl_area{box-sizing: border-box}
#gnb .mbl_area p.mbtn_srch a{display:block; padding:10px; background: #465966; color:#fff; font-size: 14px; font-weight:600; text-align: center; box-sizing: border-box}
#gnb .mbl_area p.mbtn_srch a span{display:inline-block; padding:3px 0 5px 35px; background:url(../images/main/icon_srch_m.png) no-repeat left center}
#gnb .mbl_area ul{display: flex}
#gnb .mbl_area li {flex: 1; height: 40px; line-height: 37px}
#gnb .mbl_area li:first-child{border-right: 1px solid #465966}
#gnb .mbl_area li a {display:block;  color:#fff; font-size: 14px; font-weight:600; text-align:center; box-sizing: border-box}
#gnb .mbl_area li a span{display: inline-block; padding: 2px 0 2px 40px}
#gnb .mbl_area li:first-child a span{background:url(../images/main/icon_login_m.png) no-repeat left center}
#gnb .mbl_area li:last-child a span{background:url(../images/main/icon_join_m.png) no-repeat left center}
#gnb .mbl_area li a span{padding-left: 20px}
/*GNB_메뉴타이틀*/
#gnb .gnb_list{padding: 10px}
#gnb .gnb_list .depth1 h2{margin-bottom: 10px}
#gnb .gnb_list .depth1 h2 a{position: relative; display:block; line-height:56px; font-size:16px; font-weight:600; padding:0 0 0 15px; margin:0; width:auto; border-radius: 10px; background: #f1f1f1; color:#000; box-sizing: border-box}
#gnb .gnb_list .depth1 h2 a::after{content: ""; display: block; clear: both; position:absolute; right:10px; top:10px; width: 32px; height: 36px; background:url(../images/main/bg_mn.png) no-repeat center}
#gnb .gnb_list .act h2 a {position: relative; background:linear-gradient(100deg, #344754 10%, #698ea6 100%); color:#fff}
#gnb .gnb_list .act h2 a::after{background:url(../images/main/bg_mn_a.png) no-repeat center}
/*GNB_메뉴세부*/
#gnb .gnb_list .mn_boxleft,
#gnb .gnb_list .depth2{display: none}
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: 100%; padding:10px; margin:0 0 15px; background: #fff; border-bottom: 2px solid #dadada; box-sizing: border-box}
#gnb .gnb_list .depth1 .navi_sub ul > li{margin-bottom: 7px; border-bottom: 1px solid #e2e2e2}
/* #gnb .gnb_list .depth1 .navi_sub ul > li:last-child{margin-bottom: 0; border-bottom: none} */
#gnb .gnb_list .depth1 .navi_sub ul:last-child li:last-child{margin-bottom: 0; border-bottom: none}
#gnb .gnb_list .depth1 .navi_sub .third_tit a{position: relative; display:block; padding:3px 3px 3px 20px; margin-bottom: 5px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; font-size: 14px; font-weight: 400; line-height:180%}
#gnb .gnb_list .depth1 .navi_sub ul > li:last-child .third_tit{margin-bottom: 0}
#gnb .gnb_list .depth1 .navi_sub .third_tit a::after{display: block; clear: both; content: ''; position: absolute; top:12px; left:3px; width: 6px; height: 6px; background: #b4b4b4; border-radius: 2px}
#gnb .gnb_list .depth1 .navi_sub .third_tit:hover a::after{background:#318ac4}
#gnb .gnb_list .depth1 .navi_sub .third_tit:hover > a {color:#318ac4; font-weight:600}

/*header-hover*/
.headerwrap:hover .header_top .logo_top a{background-size: 223px 23px}

/* Visual */
.visual_wrap{height:850px}
/* 비주얼 텍스트 */
.vtxt_bx .vtxt_item{transform:translateY(calc(-50% + 60px))}
.vtxt_bx .vtxt_item .slogan{margin-bottom: 30px; font-size: 22px}
.vtxt_bx .vtxt_item .stname{font-size: 47px}
.vtxt_bx .vtxt_item .engtxt{font-size: 15px}
/*비주얼 동영상 컨트롤*/
.video_control{margin-bottom: -180px}
}

@media only screen and (max-width:1280px) {
/* Footer */  
#footwrap .add{margin-left: 0}
#footwrap .copy{margin-left: 0}
/*하단로고*/
#footwrap .foot_logo{display: none}
}

@media only screen and (max-width:1100px) {
/***Content  Common***/    
.visual_conline{position: relative; height: auto; width: 100%; margin-top:-120px}
    
/* Poplayer */
.main_openpop{height:60px}
.main_openpop .poptit{font-size: 17px}
.main_openpop .popup_on{top:-391px; left:0; width:100%; background:rgba(255,255,255,.4)}    
/*버튼*/
.main_openpop .popup_open a{width:100%; height:60px; line-height: 60px; font-size: 16px; background:rgba(255,255,255,.4)} 
.main_openpop .popup_open a .popup_hide::after,
.main_openpop .popup_open.openact a .popup_hide::after{top:26px}
 
/*공지사항*/
.notice_wrap{margin-left: 0; height: 60px}
.notice_wrap .tit{padding-left: 20px; line-height: 60px; font-size: 16px}
.notice_wrap .tit span{padding:2px 0 2px 40px}
/*공지 리스트*/
.notice_wrap .noti_lstbx{height: 60px; padding: 13px 0;  margin: -60px 60px 0 145px}
.notice_wrap .noti_lst{margin-right: 60px}
.notice_wrap .noti_lst a{font-size: 15px}
.notice_wrap .noti_lst a .depart{padding: 0 15px; margin-right: 10px; font-size: 14px}
/*이동버튼*/
.notice_wrap .noti_btn{width: 60px; height: 60px}
.notice_wrap .noti_btn li a{display: block; width: 60px; height: 30px; transition: .4s}
/*더보기*/
.notice_wrap .more a{width: 60px; height: 60px; font-size: 13px}
.notice_wrap .more a span{padding-bottom: 10px}
.notice_wrap .more a::after{top:15px; width:10px; height: 10px}
}

@media only screen and (max-width:1024px) {
/* Visual */
.visual_wrap{height:586px; min-height:320px}  
/* 비주얼 텍스트 */
.vtxt_bx .vtxt_item{transform:translateY(calc(-50% + 40px))}
.vtxt_bx .vtxt_item .slogan{margin-bottom: 20px; font-size: 15px}
.vtxt_bx .vtxt_item .stname{font-size: 32px}
.vtxt_bx .vtxt_item .engtxt{font-size: 10px}
/*비주얼 동영상 컨트롤*/
.video_control{width: 30px; height: 30px; margin-bottom: -120px; background-size: 30px}
/*재생중*/
.video_control.playing{background-size: 30px}

/* Banner */ 
/*버튼*/
.banner_wrap .more{top:33px; left:124px}

/* Footer */
#footwrap .foot_bx{margin: 0}
}

@media only screen and (min-width:1100px) {
/*비주얼 컨텐츠 팝업 유무에 따라서 자동으로 넓이 조정*/
.visual_conline{display:flex; justify-content: space-around}
.visual_conline > div{flex: 1}
.visual_conline .main_openpop .popup_open a{position: relative}
.visual_conline .content_poplayer{max-width: 310px}
.visual_conline #main_notice{width:calc(100% - 310px)}
.visual_conline .notice_wrap{width: 100%; margin: 0}
}

@media only screen and (max-width:900px) {
/*월별 소식*/ 
#main_calendar .cal_wrap{width:auto; height:auto; padding:0 15px; margin-bottom: 35px}
/*타이틀*/
.cal_wrap .titbx{width: auto; height: auto; padding: 20px 0; margin-bottom: 30px; border-right: none; border-bottom: 1px solid #e3e3e3}
/*이동버튼*/
.cal_wrap .btn_bx{left:inherit; right: 10px; top:115px}
.cal_wrap .btn_bx ul{display: flex; gap:10px}
.cal_wrap .btn_bx ul li button{width:40px; height: 40px}
/*더보기 버튼*/
.cal_wrap .more{position: relative; left:0; bottom:0; margin-top: 30px}
.cal_wrap .more a{width: 100%; font-size: 15px}
/*리스트*/
.cal_wrap .cal_area{margin: 0}
/*AI교육원 시설안내*/ 
#main_album{background:none}
#main_album .album_wrap{position: relative; width: auto; padding: 0 15px}
/*타이틀*/
.album_wrap .titbx{padding:0 0 30px; margin:0 0 30px}
.album_wrap .titbx .smtit{font-size: 14px}
/* 썸네일 */ 
.album_wrap .photo_fade {margin-bottom: 0}
/*대표이미지*/
.album_wrap .photo_main {display: none}
}

/********* TABLET LAYOUT[ 1024px ~ 1850 중간사이즈 조정 끝] *********/

@media only screen and (max-width:600px) {
/* Visual */
/*.visual_wrap{height:586px; min-height:320px}  */
.visual_conline{margin-top: -150px}

/* 비주얼 텍스트 */ 
.vtxt_bx .vtxt_item .slogan{margin-bottom: 10px; font-size: 12px}
.vtxt_bx .vtxt_item .stname{font-size: 24px}
.vtxt_bx .vtxt_item .engtxt{font-size: 10px}

/* Poplayer */
.main_openpop{height:60px}

/*공지사항*/
.notice_wrap{height: 90px}
.notice_wrap .tit{line-height: 40px; border-bottom: 1px solid rgba(255,255,255,.4); font-size: 15px}
/*공지 리스트*/
.notice_wrap .noti_lstbx{height: 50px; padding: 10px 0 8px 15px; margin: 0}
.notice_wrap .noti_lst a{font-size: 14px}
.notice_wrap .noti_lst a .depart{line-height: 28px; height: 28px; font-size: 13px}
/*이동버튼*/
.notice_wrap .noti_btn{height: 50px}
.notice_wrap .noti_btn li a{height: 25px}
/*더보기*/ 
.notice_wrap .more a{align-items:center; width: 61px; height: 40px; font-size: 12px}
.notice_wrap .more a span{padding:0}
.notice_wrap .more a::after{display: none}
}

/**** keyframe ****/
@keyframes shake{
    0% {transform:translateY(3px)}
    50% {transform:translateY(-3px)}
    100% {transform:translateY(3px)}
}
@keyframes shake2{
    0% {transform:translateY(5px)}
    50% {transform:translateY(-5px)}
    100% {transform:translateY(5px)}
}
@keyframes shake3 {
    0%,40%,100% {transform:translatex(0)}
    20%,60% {transform:translatex(-5px)}
}
@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-5px)}
}
@keyframes effect2 {
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-3px)}
}
@keyframes effect3 {
    0%,40%,100% {transform:translatex(0)}
    20%,60% {transform:translatex(-3px)}
}
@keyframes bgmove {
    from {background-position: 50% 0%}
    to   {background-position: 50% 100%}
}
@keyframes spin {
  from {transform: rotate(0deg)}
  to   {transform: rotate(360deg)}
}
@keyframes imgmove {
  0%   {transform: translateY(0)}
  50%  {transform: translateY(-50px)}
  100% {transform: translateY(0)}
}
@keyframes imgzoom {
  from {transform: scale(1)}
  to {transform: scale(1.1)}
}