@charset "utf-8";
/* CSS Document */
/* com2zoa design kjh, publishing kjh 20260723 */
/* ※아래 적용된 스타일은 기본레이아웃 구성이므로 각 학교에 맞게 전반적 수정해야함 */

/* Common */
.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}

/* Layout */
#wrap {position: relative; width: 100%; min-width: 320px; overflow: auto}
#content {position: relative}
h3.tit {font-size:1.231em; font-weight:400; color:#000; font-family:'jalnan'}

/* basic */
img, li img, dd img {vertical-align: middle}

/* 로고 영역 */
.logo a {display:flex}
.logo a .logo_txt {display: flex; overflow:hidden; white-space: nowrap; animation:blink 1.4s infinite}
.logo a .logo_txt span {display:inline;; font-size:12px; letter-spacing:0.5px}
.headerwrap {position:absolute; top:0; left:0; height:70px; width:100%; z-index:10}
.header_top .logo{position: absolute; top:12px; left:10px}
.header_top .logo a{display: block}

.qmenu {position:absolute; top:20px; right:10px; display:flex; justify-content: space-between; gap:5px}
.qmenu .qmu_btn {transition:.3s}
.qmenu .qmu_popup a {display:flex; justify-content: space-between; align-items: center; width:44px; height:24px; padding:0 10px 0 5px; background:none; color:#fff; border:2px solid rgba(255,255,255,0.6); border-radius:50px; font-weight:600}
.qmenu .qmu_popup a .ptit {padding:3px 0 3px 20px; background: url(../images/main/blt_popup.png) no-repeat 0 50%}
.qmenu .qmu_popup a .pnum {display:block; color:#fff; position: relative; width:28px; text-align: right; flex-shrink:0}
.qmenu .qmu_popup a .pnum:after {content:"건"; display:inline-block}
.qmenu .btn_all a {display:block; width:44px; height:28px; background:url(../images/main/btn_allmn.png) no-repeat 50% 50%; font-size:0; border:2px solid rgba(255,255,255,1); border-radius:50px; box-sizing: border-box; transition:.3s}

.fixed .headerwrap .qmenu .qmu_popup a {background:linear-gradient(90deg, #f1567e, #feb548); border:none}
.fixed .headerwrap .qmenu .btn_all a {background-color:#000; border-color:#000}   
 
/* 레이어 팝업 */
.mpop_top {display:flex; width:536px; margin:0 auto 15px; align-items: center; justify-content:center}
.mpop_bg {position: fixed; top: 0;left: 0; width: 100%;height: 100%; background-color: #000; opacity: 0.7; z-index:110}
.mpopup_box {display:none}
.mpopup_box.on {display:block}
.mpop_lstwrap {position:fixed; top:150px; left:50%; margin-left:-268px; z-index:111; text-align: center}
.mpop_tit {display:block; text-align: center}
.mpop_tit span {padding:3px 0 3px 34px; background:url(../images/main/blt_poptit.png) no-repeat 0 50%;  font-size:22px; font-weight:600; color:#fff}
.mpop_lstwrap .mpop_tb {width:536px}
.mpop_list {position:relative}
.mpop_layer {flex: 0 0 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin:0 5px}
.mpop_layer a {display:block}
.mpop_layer a.mpop_img {overflow: hidden; display:block; max-width:100%; width:526px; height:310px; background:#eee; box-shadow:0 2px 5px rgba(0,0,0,0.1); border-radius:13px; border:1px solid rgba(255,255,255,0.1); box-sizing: border-box}
.mpop_layer a.mpop_txt {display:flex; justify-content: center; width:100%; text-align: center; color:#fff; font-size:17px; font-weight:600; padding:15px 0; white-space: nowrap}
.mpop_layer img {width:524px; height:310px}
.mpop_lstwrap .slick-arrow {position: absolute; top:144px; width:45px; height:45px; font-size:0}
.mpop_lstwrap .slick-prev {left:-50px; background:url(../images/main/btn_pop_prev.png) no-repeat 50% 50%}
.mpop_lstwrap .slick-next {right:-50px; background:url(../images/main/btn_pop_next.png) no-repeat 50% 50%}
.mpop_closebox {display: flex; justify-content: space-between; gap:5px}
.mpop_closebox li {width:calc(100% /2)}
.mpop_closebox li a {display:block; height:40px; line-height:38px; font-size:1.077em; border:1px solid #bdbdbd; border-radius:5px; padding:0 10px; box-sizing: border-box; color:#fff; text-align: left; font-weight:600}
.btn_poptoday a span {display:block; background:url(../images/main/btn_pop_close.png) no-repeat right 5px top 50%}
.btn_popclose a span {display:block; background:url(../images/main/btn_pop_close.png) no-repeat right 5px top 50%}

/* Visual */
.visual {position:relative; overflow:hidden}
.visual .visual_wrap {position:relative; width: 100%; margin: 0 auto}
.visual_wrap .slick-arrow {display:none !important}
.visual_wrap .slick-dots li button, .visual_wrap .btn_visual li button {border:none; background:none; font-size:0}
.visual_wrap .visual_item {position:relative; display: block; width:100%; height:490px; background:url(../images/main/vbg_mtop.jpg) no-repeat 50% 0, url(../images/main/vbg_mbott.jpg) no-repeat 50% 100%}
.visual_wrap .visual_item > a {position: relative; display:block; height:490px}
.visual_wrap .visual_item > a:focus-visible {height:448px; outline:2px solid #000}

/* 비주얼 슬로건 영역 */
.visual_wrap .vslogan {position: absolute; bottom:0; left:0; height:100%; width:100%; padding:0 20px; text-align: center; align-content: center; box-sizing: border-box; font-size:0; background:url(../images/main/mv_slogan_n.png) no-repeat 50% 100%}
.visual_wrap .vslogan img {display: none}
.visual_wrap .vslogan_host {display:none}
.ctrl_wrap {display:none}

/***************** Layout ******************/
/***Content  Common***/
.content01 {position:relative; background: linear-gradient(0deg, #fffaf4 20%, #fff 50%); padding:0 10px}
.content03 .cont_tit {background-position:0 0; font-size:2.154em; text-align: left}
.content04 {background:url(../images/main/bg_host_left.gif) no-repeat bottom left, url(../images/main/bg_host_right.gif) no-repeat bottom right}

/*더보기버튼 공통*/
#content .btn_more {position: absolute}
#content .btn_more a {display: block; width:42px; height:42px; align-content:center; background:#eee;  border-radius:50%; transition: all .3s; text-align: center}
#content .btn_more img {width:14px; height:14px; transition: all .3s}
#content .btn_more a:hover img {transform: rotate(180deg)}

.cont_top {padding:30px 0 22px; text-align: center}
.cont_tit {padding:32px 0 0; font-size:2em; font-weight:700; background:url(../images/main/bg_titblt.png) no-repeat 50% 0}
.cont_engtit {display:block; padding-top:16px; color:#c2c2c2; font-size:1.077em; font-weight:600}

/* 박람회 소개 */
.yhc_intro {position:relative; padding-bottom:30px}
.yhc_intro:before {content:""; display:block; position: absolute; bottom:0; left:calc(50% - 9px); transform:translateX(-50%); width:100vw; height:1px; background:linear-gradient(90deg, #75d679, #ffa132)}
.yhc_introlst {display: flex; justify-content: space-between; gap:15px}
.intro_lst {flex:1; max-width:386px}
.intro_lst a {position:relative; max-width:100%; max-height:100%; transition:.3s}
.intro_lst dl dt {padding:35px 0 28px; font-size:2.154em; font-weight:700}
.intro_lst dl dd {line-height:130%; font-size:1.231em; font-weight:400; color:#222; word-break: keep-all}
.intro_box {position:relative}
.intro_img {overflow: hidden; position:relative; display:block; border-radius:20px}
.intro_img img {width:100%; transition:.3s}
/* Shine Effect */
.intro_img::before {content:""; position:absolute; top:-150px; left:-300px; width:120px; height:550px; background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.2) 35%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.2) 65%,rgba(255,255,255,0)); filter:blur(20px); opacity:0; transform:rotate(45deg); pointer-events:none;  z-index:1}
.intro_barogo {display:none; position: absolute; bottom:-30px; right:20px; width:60px; height:60px; background:#ff7d43 url(../images/main/bg_intro_arr.png) no-repeat 50% 50%; border-radius:50%; box-shadow:0 2px 7px rgba(0,0,0,0.2); font-size:0; animation:arrowmove .9s linear infinite; z-index:2}
/* hover */
.intro_lst a:hover .intro_barogo {display: block}
.intro_lst a:hover .intro_img {box-shadow:0 3px 8px rgba(0,0,0,0.3)}
.intro_lst a:hover .intro_img img {transform: scale(1.1)}
.intro_lst a:hover .intro_img::before{animation:shine 1s ease-out forwards}

/* 박람회 콘텐츠 */
.yhc_contlst {display:flex;justify-content: space-between}
.yhc_contlst .contents_lst {overflow:hidden; position:relative; width:calc(100% / 3); text-align: center}
.yhc_contlst .contents_lst:before {content:""; display: block; position: absolute; bottom:0; left:0; width:100%; height:195px}
.yhc_contlst .conts_tit {font-weight:600}
.yhc_contlst .conts_num {display:block; align-content: center; width:90px; height:45px; margin:0 auto; border-radius:0 0 90px 90px; color:#fff; font-size:1.538em}
.yhc_contlst .conts_name {display:block; padding:24px 0 20px; font-size:2.154em}
.yhc_contlst .conts_txt {font-size:1.385em; font-weight:400}
.yhc_contlst .conts_img {position: relative; min-height:272px; display:block; align-content: flex-end; text-align: center}
.yhc_contlst .conts_img img {position:absolute; bottom:0; left:50%}
.yhc_contlst .conts_view a {display: block; position:relative; align-content:center; width:288px; margin:0 auto 22px; padding:19px 50px 19px 25px; font-size:1.385em; font-weight:600; box-sizing: border-box; background:#fff; border-radius:50px; text-align:left; border:2px solid #fff; transition:.3s}
.yhc_contlst .conts_view a:after {content:""; display:block; position:absolute; top:50%; right:8px; width:44px; height:44px; line-height:44px; border-radius:50%; background:#fff url(../images/main/bg_contents_arr.png) no-repeat 50% 50%; margin-top:-22px}
.yhc_contlst .conts_view a:hover:after {animation:arrowmove .9s linear infinite;}

.contents_lst01 {background:#ebf1f9}
.contents_lst01:before {background:#dbe6f6}
.contents_lst01 .conts_num {background:#4c88d7}
.contents_lst01 .conts_view a {border-color:#4c88d7}
.contents_lst01 .conts_view a:hover {color:#4c88d7}
.contents_lst01 .conts_view a:after {background-color:#4c88d7}
.contents_lst01 .conts_img img {margin-left:-175px}

.contents_lst02 {background:#effbe8}
.contents_lst02:before {background:#e5f6db}
.contents_lst02 .conts_num {background:#8ac86c}
.contents_lst02 .conts_view a {border-color:#8eca71}
.contents_lst02 .conts_view a:hover {color:#8eca71}
.contents_lst02 .conts_view a:after {background-color:#8ac86c}
.contents_lst02 .conts_img img {margin-left:-165px}

.contents_lst03 {background:#fffbeb}
.contents_lst03:before {background:#fef1da}
.contents_lst03 .conts_num {background:#f39d49}
.contents_lst03 .conts_view a{border-color:#f39d49}
.contents_lst03 .conts_view a:hover {color:#f39d49}
.contents_lst03 .conts_view a:after {background-color:#f39d49}
.contents_lst03 .conts_img img {margin-left:-305px}

/* 컨텐츠ㅡ 박람회 추가 kjh 260810 */
.yhc_contlst .conts_go a {display: block; position:relative; align-content:center; width:100%; margin:0 auto 22px; padding:19px 60px 19px 15px; font-size:1.385em; font-weight:600; box-sizing: border-box; background:#fff; border-radius:50px; text-align:left; border:2px solid #f39d49; transition:.3s}
.yhc_contlst .conts_go a:after {content:"GO"; display:block; position:absolute; top:50%; right:8px; width:44px; height:44px; line-height:44px; border-radius:50%; background:#fff; margin-top:-22px; text-align:center; color:#000}
.yhc_contlst .conts_go a:hover:after {animation:arrowmove .9s linear infinite;}
.contents_lst03 .conts_view {width:55%}
.contents_lst03 .conts_view a {width:100%; padding:19px 60px 19px 15px}
.contents_lst03 .conts_btnwrap {display:flex; justify-content:center; gap:5px; padding:0 50px}
.contents_lst03 .conts_go {width:45%}
.contents_lst03 .conts_go a {background:#f39d49; color:#fff}
.contents_lst03 .conts_go a:hover {background:#ff9800}

/* ===== 공지+아카이브 ===== */
/* 공지 */
#main_notice {position: relative}
#main_notice .btn_more {top:106px; right:0}
#main_notice .btn_more a {background:#8ac86c}
#main_notice .cont_tit span {color:#52b523}
.notice_tb ul {overflow:hidden; display:flex; justify-content: space-between; gap:18px}
.notice_tb ul li {width:100%}
.notice_tb ul li .noti_box {display:flex; flex-direction: column; overflow:hidden; width:100%; height:100%; border-radius:15px; border:1px solid #d3d3d3; box-sizing: border-box; background:#fff}
.notice_tb ul li .tit {flex:0 0 auto; height:94px;line-height: 1.4; padding:25px; background:#f7f7f7; font-size:1.308em; font-weight:600;box-sizing: border-box}
.notice_tb ul li:hover .tit {text-decoration:underline}
.notice_tb ul li .tit span {overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box;-webkit-line-clamp: 2;
-webkit-box-orient: vertical}
.notice_tb ul li .txt {flex:1; display:flex;line-height: 1.4; padding:20px 25px; font-size:1.154em; font-weight:400; color:#383838; box-sizing: border-box}
.notice_tb ul li .txt span {overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box;-webkit-line-clamp: 2;
-webkit-box-orient: vertical}
.notice_tb ul li .date {margin-top:auto; padding:0 25px 18px; text-align:right}
.notice_tb ul li .date span {display:inline-block; padding:2px 0 2px 20px; background:url(../images/main/blt_noti_date.gif) no-repeat 0 50%; color:#8e8e8e; font-size:1.077em; font-weight:400}

/* 아카이브 */
#main_album {position:relative}
#main_album .btn_more {top:106px; right:0}
#main_album .btn_more a {background:#ec8521}
#main_album .cont_tit span {color:#ec8521}
.photo_area {padding:12px 0; border:1px solid #d3d3d3; border-radius:15px; background:#fff}
.photo_area.nodata {position:relative; padding:12px 10px;height:188px}
.photo_area.nodata:after {content:""; display:block; position:absolute; top:12px; left:10px; width:calc(100% - 20px); height:calc(100% - 24px); background:url(../images/main/none_img.png) no-repeat center 50% #ccc; border-radius:12px}
.photo_img {margin:0 12px}
.photo_img a {position: relative; overflow:hidden; display:block; max-width: 282px; max-height: 188px; width:100%; height:100%; margin: 0 auto; background: url(../images/main/none_img.png) no-repeat center 40% #ccc; border-radius:12px}
.photo_img a::before{content: ""; position: absolute; width: 100%; height: 100%; background: url(../images/main/ico_view.png) no-repeat center rgba(0, 0, 0, .7); z-index: 1; top: -100%; transition: .3s}
.photo_img a:hover::before, .photo_img a:focus::before{top: 0}
.photo img {width:100%; height:100%}
.photo_img .txt {position: absolute; bottom:0; left:0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; width:100%; height:50px; background:rgba(0,0,0,0.7); color:#fff; text-align: center; font-size:1.231em; font-weight:400; align-content: center; padding:0 20px; box-sizing: border-box}
.photo_img .photo {width: 282px; height: 188px}

#main_album .btn_slide {display:flex; position:absolute; top:114px; right:48px; justify-content: space-between; align-items: center; box-sizing: border-box}
#main_album .btn_slide li {}
#main_album .btn_slide li:first-child {border-right:1px solid #ccc}
#main_album .btn_slide li a {display:block; width:26px; height:26px; line-height:26px; text-align: center}
#main_album .btn_slide li a img {vertical-align: middle}

/* 주최/주관 */
.yhc_host .cont_top {padding:70px 0 0}
.yhc_host ul.host_lst {display: flex; justify-content: center; gap:50px; padding:75px 0 85px}

/* 탑버튼 */
.btn_top {display: block; position:fixed; bottom:20px; right:20px; z-index:10}
.btn_top a {position:relative; display:block; width:60px; height:60px; margin:0 auto; background:rgba(0,0,0,0.6); font-size:14px; text-align:center; border-radius:50%; font-weight:600}
.btn_top a span {display:block; padding:32px 0 10px; color:#fff; background:url(../images/main/btn_top_arr.png) no-repeat 50% 12px}

/* footer */
.foot_wrap {display:flex; justify-content:center; position: relative; background:#000}
.foot_area {background:#333; padding:8px 10px}
.foot_menu {display:flex; justify-content:space-between; max-width:1300px; margin:0 auto}
.foot_menu ul {display: flex; justify-content:flex-start; gap:5px}
.foot_menu ul li a {display:block; align-content:center; min-height:48px; padding:0 35px; background:#fff; border-radius:10px; font-size:1.154em; font-weight:500}
.foot_menu ul li:first-child a {background:#f46537; color:#fff}
#footwrap .add_wrap {max-width:1300px; margin:0 auto; padding:12px 10px 22px; background:url(../images/main/flogo_new.gif) no-repeat right 0 top 50%}
#footwrap .add_wrap dl {display: flex; justify-content:flex-start; margin-top:10px}
#footwrap .add_wrap dl dt {padding-right:15px; margin-right:15px; border-right:1px solid rgba(255,255,255,0.5); font-weight:600; font-size:1.154em; color:#fff}
#footwrap .add_wrap dl dd {font-weight:400; font-size:1.077em; color:#d9d9d9}

#footwrap .add_line {display: flex; justify-content:space-between; gap:15px; max-width:380px}
#footwrap .add_line2 {max-width:420px}
#footwrap .add_line a {color:#d9d9d9}

.count_box {display:flex; align-items: center}
.count_box ul {gap:0}
.count_box li {display:flex; justify-content: space-between; width:190px; padding:7px 15px; color:#fff; font-size:1.154em}
.count_box li:first-child {border-right:1px solid rgba(255,255,255,0.3)}
.count_box li .num {font-weight:600}
#footwrap .copy {line-height:120%; padding:18px 0; text-align:left; color:#999; font-size:1.154em; font-weight:500; border-top:1px solid rgba(255,255,255,0.2)}
#footwrap .copy p {max-width:1300px; margin:0 auto}



/*************** MOBILE LAYOUT ***************/
@media only screen and (max-width:1024px) {
/* Common */
.skip_navi .pc_skip{display:none}

/* Layout */
#mainheader {position: relative; z-index:100}
.fixed .headerwrap {position:fixed; background:rgba(255,255,255,0.85); box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.fixed .headerwrap .qmenu .qmu_popup a {height:28px; padding:0 12px 0 7px}
#content {border-bottom:0}
	
/* 로고영역 */
.logo a img {width:166px}
    
.qmenu .qmu_popup a .ptit {height:18px; font-size:0}
.qmenu .btn_all a {background-size:16px auto}
 
/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0;  width:100%; height:100%; min-height:100%; background:#fff; z-index:501; overflow-y:auto; box-sizing:border-box}
/* GNB_상단 */
#gnb p.mb_gnbtit {display: block; align-content: center; box-sizing: border-box; height:60px; font-size:1.538em; font-weight:600; color:#fff; background:linear-gradient(90deg, #ec6c7e, #fbab4f); padding:0 10px}
#gnb p.mb_gnbtit span {display:inline-block; padding:3px 0 3px 25px; background:url(../images/main/blt_allmn_tit.png) no-repeat 0 50%}
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:17px; right:10px; width:24px; height:24px; overflow: hidden; background:url(../images/main/btn_gmn_close.png) no-repeat 50% 50%; line-height:0; text-indent:-9999px}

/* GNB_메뉴타이틀 */
#gnb .gnb_list .depth1 {border-bottom:1px solid #dedede}
#gnb .gnb_list .depth1 > h2 {position:relative}
#gnb .gnb_list .depth1 > h2 a {display:block; align-content: center; min-height:56px; font-size:16px; font-weight:500; padding:16px 40px 16px 20px; width:auto;  color:#222; box-sizing: border-box; background:#fff}
#gnb .gnb_list .depth1 > h2 a[target=_blank] span{display:inline-block; padding-right:15px}
#gnb .gnb_list .depth1 > h2 a:before {content:""; display:block; position: absolute; top:50%; right:12px; margin-top:-12px; width:23px; height:23px; background:url(../images/main/blt_mnarr_off.png) no-repeat 50% 50%; border-radius:5px}
#gnb .gnb_list .act > h2 a {position: relative}
#gnb .gnb_list .act > h2 a:before {background:url(../images/main/blt_mnarr_on.png) no-repeat 50% 50%; right:12px}

/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width:100%; box-sizing: border-box; padding:0 12px 10px; overflow: hidden; box-sizing: border-box}
#gnb .gnb_list .depth1 .navi_sub ul {background:#f1f1f1; border-radius:5px; overflow: hidden}
#gnb .gnb_list .depth1 .navi_sub ul > li {position:relative; border-top:1px solid #d9d9d9}
#gnb .gnb_list .depth1 .navi_sub ul > li:first-child {border-top:0}
#gnb .gnb_list .depth1 .navi_sub ul > li:after {content:""; display: block; position: absolute; top:9px; left:12px; width:5px; height:13px; background:url(../images/main/blt_submnarr_off.png) no-repeat 0 5px}    
#gnb .gnb_list .depth1 .navi_sub ul > li > a {line-height:120%; display:block; padding:10px 10px 10px 25px; font-size:1.077em; font-weight: 400; color:#353535}
#gnb .gnb_list .depth1 .navi_sub ul > li > a[target=_blank] span{display:inline-block; padding-right:15px}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover a {font-weight:600; color:#fff; background:#f6ad2d}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover:after {background:url(../images/main/blt_submnarr_on.png) no-repeat 0 5px}

.gnb_box .home_baro {position:absolute; top:25px; left:12px}
.gnb_box .home_baro a {display:block; padding:1px 0 0 21px; font-size:15px; font-weight:700; color:#fff; background:url(../images/main/blt_home.png) no-repeat 0 50%}
.fixed .gnb_box .home_baro a {color:#000; background:url(../images/main/blt_home_on.png) no-repeat 0 50%}

/********************************************* Layout **********************************************/
/***Content  Common***/   
.mb_none{display: none}


.cont_tit span {background-size:63px auto}
.content03 .cont_tit {font-size:1.692em}
.content04 {background:url(../images/main/bg_host_mleft.gif) no-repeat bottom left, url(../images/main/bg_host_mright.gif) no-repeat top right}
#content .btn_more a {width:30px; height:30px}
#content .btn_more img {width:10px; height:10px}
    
    
/* 박람회 소개 */
.intro_lst dl {padding:0 10px}
.intro_lst dl dt {padding:26px 0 20px; font-size:1.846em}
.intro_lst dl dd {font-size:1.077em}
.intro_barogo {bottom:-24px; width:48px; height:48px}

/* 박람회 콘텐츠 */
.yhc_contlst {flex-direction: column}
.yhc_contlst .contents_top {position:relative; text-align:left}
.yhc_contlst .contents_lst {width:100%}
.yhc_contlst .conts_num {margin:22px 10px 0; width:36px; height:36px; border-radius:50%; font-size:1.231em; text-align:center}
.yhc_contlst .conts_name {padding:14px 10px; font-size:1.538em}
.yhc_contlst .conts_txt {padding:15px 10px 15px 10px; font-size:1.154em}
.yhc_contlst .conts_img {position:absolute; top:0; right:0; min-height:100px; align-content: flex-start; text-align:left}
.yhc_contlst .conts_img img {position:inherit; bottom:inherit; left:inherit; margin:0; width:100%}

.yhc_contlst .contents_lst:before {bottom:inherit; top:105px; height:calc(100% - 100px)}
    
.contents_lst01 .conts_img {width:160px}
.contents_lst02 .conts_img {width:150px}
.contents_lst03 .conts_img {width:260px; top:25px}
    
.yhc_contlst .conts_view a:after {right:5px; width:30px; height:30px; line-height:30px; margin-top:-15px; background-size:20px auto}
.yhc_contlst .conts_view a {width:calc(100% - 20px); padding:10px 50px 10px 15px; margin:0 10px 15px; box-sizing: border-box; font-size:1.154em}

/* 컨텐츠ㅡ 박람회 추가 kjh 260810 */
.yhc_contlst .conts_go a:after {right:5px; width:30px; height:30px; line-height:30px; margin-top:-15px; background-size:20px auto}
.yhc_contlst .conts_go a {width:calc(100% - 10px); padding:10px 50px 10px 15px; margin:0 0 15px; box-sizing: border-box; font-size:1.154em}
.contents_lst03 .conts_btnwrap {padding:0; gap:0}

/* ===== 공지+아카이브 ===== */
/* 공지 */
#main_notice {padding:0 10px 30px}
#main_notice .btn_more {top:58px; right:10px}
#main_notice:before {content:""; display:block; position: absolute; bottom:0; left:0; width:100%; height:100px; background:#f3f3f3; z-index:-1}
.notice_tb ul {flex-direction: column; height:155px; gap:25px}
.notice_tb ul li .tit {line-height:1.2; height:70px; padding:16px 15px; font-size:1.154em}
.notice_tb ul li .txt {flex: 0 0 54px; line-height:1.2; height:54px; padding:13px 15px 8px; font-size:1.077em}
.notice_tb ul li .date {padding:0 15px 10px}
.notice_tb ul li .date span {font-size:1em}
    

/* 아카이브 */
#main_album {padding:0 10px 30px}
#main_album:before {content:""; display:block; position: absolute; bottom:0; left:0; width:100%; height:100px; background:#f3f3f3; z-index:-1}
#main_album .btn_more {top:56px; right:10px}
#main_album .btn_slide {top:58px; right:46px}


/* 주최/주관 */
.yhc_host .cont_top {padding:30px 0 0}
.yhc_host ul.host_lst {gap:10px; padding:30px 15px; flex-wrap:wrap}
.yhc_host ul.host_lst li img {max-height:30px}

/* 탑버튼 */
.btn_top {bottom:15px; right:5px}
.btn_top a {width:46px; height:46px}
.btn_top a span {padding:25px 0 5px; background-position:50% 8px}
    
/* 하단 */
.foot_wrap {display:block}
.foot_menu {justify-content:center}
.foot_menu ul {width:100%}
.foot_menu ul li {width:100%}
.foot_menu ul li a {min-height:32px; padding:0 5px; text-align: center; font-size:1em}
    
#footwrap .add_wrap {padding:75px 10px 15px; background-position:left 50% top 15px; background-size:180px auto}
#footwrap .add_wrap dl dt {padding-right:10px; margin-right:10px; flex-shrink:0; font-size:1.077em}
#footwrap .add_wrap dl dd {font-size:1em}
    
.count_box {display: none}
.count_box li {width:150px}
#footwrap .copy {font-size:1em; text-align: center}
#footwrap .add_line {max-width:320px; flex-direction: column; gap:0}
#footwrap .add_wrap dl {margin-top:8px}
    
}


















/******** PC LAYOUT ********/
@media only screen and (min-width:1025px) {
/* Common */
.skip_navi .mb_skip{display:none}

/* Layout */
.headerwrap {height:109px; border:0}
.header_top {position: relative; margin:0 auto; height:109px; max-width:1380px}
.header_top .logo {top:27px; left:0}

/* qmenu */
.qmenu {top:40px; right:0; z-index:1}
.qmenu .qmu_popup a {width:115px; height:32px; font-size:1.077em}
.qmenu .qmu_popup a .pnum {width:40px; font-weight:700}
.qmenu .btn_all a {width:56px; height:36px}

/* GNB */
.gnb_box {max-width:1300px; margin: 0 auto; box-sizing: border-box; padding:0 260px 0 220px; position:relative}
.gnb_box .home_baro {position:absolute; top:0; left:60px}
.gnb_box .home_baro a {display:block; padding:48px 0 40px; text-align: center; font-size:23px; font-weight:700; color:#fff}
.gnb_list {display: flex; justify-content:center}
#gnb .allbtnclose, #gnb .mbl_area, #gnb .gnb_wrap {display: none}
#gnb .mb_gnbtit, #gnb p.gnb_mbtxt {display: none}
#gnb .depth1 {position: relative; float:left; width:25%; text-align: center; font-weight:500}
#gnb .depth1 h2 a {display:block; padding:48px 0 40px; text-align: center; font-size:23px; font-weight:700; color:#fff}
#gnb .navi_sub {position: absolute; left: 0; top:110px; width: 100%; height:260px; border-left:1px solid #dcdcdc; font-size:18px; background:#fff;
opacity:0;  pointer-events:none;  transform:translateY(10px);  transition:opacity .35s ease, transform .35s ease;  z-index:100}
#gnb .navi_sub ul {overflow: hidden; background:#fff}
#gnb .navi_sub li {display: block; line-height: 180%; width:calc(100% - 20px); margin:13px auto; text-align: center}
#gnb .navi_sub a:hover {background:linear-gradient(90deg, #f1567e, #feb548); border-radius:5px; color:#fff}
#gnb .navi_sub li a {display: block; line-height: 130%; padding:10px; text-align: center; font-size:18px; font-weight:600; word-break:keep-all; color:#222}
#gnb .depth1.last .navi_sub, #gnb .depth1:last-child .navi_sub {border-right:1px solid #dcdcdc}
.gnb_bg {overflow:hidden; width: 100%; height:260px; position: absolute; left: 0; top:109px;  background:#fff; box-shadow: 0 6px 8px rgba(0, 0, 0, .1); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; z-index:99; border-top:1px solid #dcdcdc}
    
/* 대메뉴 hover */
.headerwrap.on:before {content:""; display:block; position: absolute; top:5px; left:0; width:100%; height:100%; background:#fff}
.headerwrap.on:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg, #f9b432, #f2495c)}
.headerwrap.on #gnb .depth1 h2 a {color:#000}
.headerwrap.on #gnb .depth1.active h2 a, .headerwrap.on #gnb .depth1 h2:hover a {color:#f34934}
.headerwrap.on .gnb_bg {opacity:1; pointer-events:auto; transform:translateY(0)}
.headerwrap.on #gnb .navi_sub {opacity:1;  pointer-events:auto; transform:translateY(0)}
.headerwrap.on .qmenu .qmu_popup a {width:115px; height:36px; background:linear-gradient(90deg, #f1567e, #feb548); border:none; padding:0 12px 0 7px}
.headerwrap.on .qmenu .btn_all a {background-color:#000}  
.headerwrap.on .gnb_box .home_baro a {color:#000}

/* visual */
/*.visual .visual_wrap {max-width:1980px}*/
.visual .visual_item {height:960px}
.visual .visual_item > a {height:960px}
.visual .item1 a:focus-visible{height:902px; outline:2px solid #000}
    
.visual_wrap .visual_item {height:960px; background:url(../images/main/vbg_top.jpg) no-repeat 50% 0, url(../images/main/vbg_bott.jpg) no-repeat 50% 100%}
.visual_wrap .visual_item > a {position: relative; display:block; height:960px}
.visual_wrap .visual_item > a:focus-visible {height:956px; outline:2px solid #000}
.visual_wrap .vslogan {top:50%; left:50%; width:748px; height:464px; padding:0; margin:-232px 0 0 -374px; background:none}
.visual_wrap .vslogan img {display:block}
.visual_wrap .vslogan .vslogan_host {display:block} 
.veffect {opacity: 0; will-change: transform, opacity}
.visual_item.slick-active .veffect {animation: titeffect 1.8s cubic-bezier(.16,1,.3,1) forwards}

.visual_wrap .vslogan_host {display:block; position:absolute; bottom:30px; left:50%; margin-left:-374px}

/* 순차 등장 */
.visual_item.slick-active .vslogan_txt {animation-delay: .2s}
.visual_item.slick-active .vslogan_date {animation-delay: .6s}
.visual_item.slick-active .yeongnam_date {animation-delay: 1s}
.visual_item.slick-active .vslogan_host {animation-delay: 1.4s}  
    
/********************************************* Layout **********************************************/
/***Content Common***/   
.pc_none{display:none}

/* content layer */
h3.tit {font-size:1.538em}
#content .btn_more img {width:12px; height:12px}
.cont_top {padding:70px 0 35px}
.cont_tit {padding-top:45px; font-size:2.769em}
.cont_engtit {padding-top:20px; font-size:1.385em}
    
/* content */
.content01:before {content:""; display:block; position:absolute; bottom:1px; left:0; width:334px; height:142px; background:url(../images/main/bg_intro_yn.png) no-repeat left 0 bottom 0}
.content01:after {content:""; display:block; position:absolute; bottom:-4px; right:0; width:342px; height:118px; background:url(../images/main/bg_intro_hn.png) no-repeat right 0 bottom 0}
.content03 {display:flex; justify-content: space-between; gap:60px; max-width:1300px; margin:0 auto}
    
/* 박람회 소개 */
.yhc_intro {max-width:1300px; margin:0 auto; padding:0 10px 90px; box-sizing: border-box}



/* 박람회 콘텐츠 */



/* ===== 공지+아카이브 ===== */
/* 공지 */
#main_notice {overflow:hidden; width:calc(100% - 370px); flex-shrink:0}
.notice_tb ul li {width:calc(100% / 3)}

/* 아카이브 */
#main_album {width:310px; flex-shrink:0}


/* 주최/주관 */
.yhc_host {max-width:1300px; margin:0 auto}
    
/* Footer */
.foot_wrap {display: block; padding:0; margin:0 auto}

    


    
}

/**** LOWSET FIX ****/
@media only screen and (min-width:1025px) and (max-width:1380px) {
.header_top .logo {left:10px}
.qmenu {right:10px}
/* 전체메뉴 */
.gnb_box {padding:0 300px 0 200px}
#gnb .depth1 h2 a {font-size:20px}
.gnb_box .home_baro a {font-size:20px}

/* 공지사항 */
.content03 {gap:30px; padding:0 10px}
#main_notice {width:calc(100% - 340px)}
.notice_tb ul {gap:15px}
    
/* 주최 주관 */
.yhc_host ul.host_lst { gap:30px; padding:75px 30px 85px}
.yhc_host ul.host_lst li img {height:36px}

/* 박람회 콘텐츠 */
.contents_lst03 .conts_btnwrap {padding:0 5px}
    
}
@media only screen and (min-width:1300px) {
/* Menu FIX */
.fixed {position:fixed; top:0; left:0; width:100%; padding-left:0; background:#fff; box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap {background:#fff; box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.fixed .headerwrap:before {content:""; display:block; position: absolute; top:5px; left:0; width:100%; background:#fff}
.fixed .headerwrap:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg, #f9b432, #f2495c)}
.fixed #gnb .depth1 h2 a {color:#000}
.fixed .headerwrap .qmenu .qmu_popup a {width:115px; height:36px; padding:0 12px 0 7px}
.fixed .gnb_box .home_baro a {color:#000}
    
}

/********* TABLET LAYOUT[중간사이즈 조정관련] *********/
@media only screen and (min-width:1025px) and (max-width:1500px) {
    .content01:before {background-size: 200px auto; bottom:0; width:200px; height:90px}
    .content01:after {background-size: 200px auto; bottom:-3px; width:200px; height:90px}
    
}


@media only screen and (max-width:767px) {
	/* popup 레이어 */
    .mpop_tit span {padding:5px 0 5px 30px; font-size:18px}
    .mpop_top {width:312px}
    .mpop_bg {opacity:0.8}
	.mpop_lstwrap {top:100px; margin-left:-155px}
	.mpop_lstwrap .mpop_tb {width:320px}
	
    .mpop_layer {width:320px}
    .mpop_layer a.mpop_img {width:310px; height:166px}
    .mpop_layer a.mpop_txt {font-size:15px}
	.mpop_layer img {width:310px; height:166px}
	.mpop_closebox {flex-direction: column; border-radius:5px}
    .mpop_closebox li {width:100%}
    .mpop_closebox li a {height:30px; line-height:28px; font-size:1em; padding:0}
    .mpop_closebox li a span {padding:0 12px; background-position:right 10px top 50%}
    .mpop_lstwrap .slick-arrow {top:-38px; width:28px; height:28px; background-size:auto 28px}
    .mpop_lstwrap .slick-prev {left:0}
    .mpop_lstwrap .slick-next {right:0}
    
    /* 박람회 소개 */
    .yhc_introlst {flex-direction: column; gap:30px}
    .intro_lst { margin:0 auto}
}

@media only screen and (max-width:500px) {
.yhc_contlst .conts_txt {padding-top:28px}
.contents_lst03 .conts_img {right:-80px}
    
}



@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-5px)}
}
/* 화살표 무한 이동 */
@keyframes arrowmove {
    0% {transform:translateY(0) translateX(-4px)}
    50% {transform:translateY(0) translateX(4px)}
    100% {transform:translateY(0) translateX(-4px)}
}
@keyframes shine {
    0% {
        left: -250px;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        left: 520px;
        opacity: 0;
    }
}
@keyframes titeffect {
    0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoom {
    0% {background-size:100% auto}
  50% {background-size:105% auto}
  100% {background-size:100% auto}
}
