@charset "UTF-8";

@font-face {
    font-family: 'GongGothicBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'GongGothicMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'GongGothicLight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.hide { display: none; }
.GGBold { font-family: 'GongGothicBold', 'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', 'dotum', sans-serif;  }
.GGMedium { font-family: 'GongGothicMedium', 'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', 'dotum', sans-serif;  }
.GGLight { font-family: 'GongGothicLight', 'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', 'dotum', sans-serif;  }
.pt0 { padding-top: 0!important; }
.mt10 { margin-top: 10px; }
.mt30 { margin-top: 30px; }
.mb20 { margin-bottom: 20px; }
.mb50 { margin-bottom: 50px; }
.w-100 { width: 100%; }
.w-80 { width: 80px!important; }
.te-center { text-align: center; }

.em-arrow { display: block; width: 24px; height: 24px; background: url("../img/em-arrow.svg") no-repeat; }

/*=================================================================================
* Main
=================================================================================*/
#wrap { width: 100%; min-height: 100%; scroll-behavior: smooth; overflow: hidden; }
.section { position: relative; scroll-behavior: smooth; }

/*=================================================================================
* flex
=================================================================================*/
.flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-flex-start { justify-content: flex-start; }
.justify-flex-end { justify-content: flex-end; }
.space-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.flex-column { flex-direction: column; }

/*================================================================================
* Header
=================================================================================*/
.header { position: fixed; width: 100%; margin: 0 auto; padding: 0 40px; z-index: 99; height: 90px; border-bottom: 1px solid #f1f1f1; text-align: center; box-sizing: border-box; background: rgba(255, 255, 255, .9); }
.header .inner { width: 100%; margin: 0 auto; padding: 0; position: relative; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; align-items: center; }
.header .logo { position: absolute; top: 48%; left: 0; width: 380px; height: 24px; transform: translateY(-50%); background: url(../img/logo.svg) 0 center/contain no-repeat; }
.header .logo a { display: block; width: 100%; height: 100%; }
.header_menu { display: inline-block; }
.header .gnb_links { width: 100%; margin-left: 30px; font-family: 'GongGothicMedium'; }
.header .gnb_links .link { position: relative; top: 1px; min-width: 160px; max-width: 170px; margin: 0 8px; height: 100%; z-index: 100; vertical-align: top; }
.header .gnb_links .link > a { position: relative; display: block; padding: 0 12px; font-size: 18px; line-height: 90px; text-align: center; color: #0075BF; box-sizing: border-box; }
.header .gnb_links .link > a:after { transition: .08s; content: ''; display: block; height: 3px; width: 100%; position: absolute; bottom: -1px; left: 0; opacity: 0; background: #0075BF; }
.header .gnb_links .link > a:hover::after { opacity: 1; transition: .1s; }
.header .gnb_1depth .link a span { }
.header .gnb_links .link a:hover, .header .gnb_links .link a.active { color: #0075BF; }
.overlay { position: fixed; background: #fff; top: 0; right: 0; width: 100%; max-width: 768px; height: 100vh; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, height 0.35s; overflow-y: auto; z-index: 100; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.16); }
.overlay.open { opacity: 1; visibility: visible; }

/* 2depth*/
.header .lnb-bg { display: none; width: 100%; position: absolute; top: 90px; left: 0; height: 300px; background: #fff; z-index: 99; box-shadow: 0 10px 10px 0 rgb(0 0 0 /3%); }
.header_menu .gnb_2depth { display: none; position: absolute; top: 97px; left: 0; width: 100%; height: 300px; overflow: hidden; }
.header_menu .gnb_2depth > ul { padding: 16px 0; }
.header_menu .gnb_2depth .gnb_2depth-link { padding: 6px 0; line-height: 24px; }
.header_menu .gnb_2depth .gnb_2depth-link a { position: relative; padding: 0 12px; width: 100%; font-size: 16px; display: inline-block; line-height: 24px; white-space: nowrap; text-align: center; letter-spacing: -1px; }
.header.active .lnb-bg { display: block; }
.header.active .header_menu .gnb_2depth { display: block; }
.main-header .inner { justify-content: center; }
.main-header .gnb_links .link > a:hover { color: #0075BF; }
.header .gnb_links .link.on > a::after { opacity: 1; transition: .1s; }
.gnb-right { position: absolute; right: 0; }
.gnb-right a, .gnb-left a  { color: #fff; margin: 0 0 0 10px; padding: 10px 20px 7px; background-color: #0075BF; border-radius: 30px; font-size: 15px; }
.gnb-right a.left, .gnb-left a.left { background-color: #00738E!important; }

.sub-visual { width: 100%; height: 460px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: flex-start; align-items: center; background-size: cover; position: relative; }
.sub-visual.sub-01 { background: url('../img/sub-top.svg') center no-repeat; }
.sub-visual.sub-02 { background: url('../img/sub-top.svg') center no-repeat; }
.sub-visual.sub-03 { background: url('../img/sub-top.svg') center no-repeat; }
.sub-visual.sub-04 { background: url('../img/sub-top.svg') center no-repeat; }
.sub-visual.sub-05 { background: url('../img/sub-top.svg') center no-repeat; }
.sub-visual .sub-navi  { width: 1200px; margin: 100px auto 0; color: #618BA5; }
.sub-visual .sub-navi a { color: #618BA5; }
.sub-visual .sub-navi  h2 { font-size: 46px; position: relative; font-family: 'GongGothicMedium'; color: #0075BF; }
.sub-visual .sub-navi .location { margin-bottom: 10px; display: flex; }
.sub-visual .sub-navi  span { font-size: 16px; }
.sub-visual .sub-navi em { margin: 0 15px; font-weight: 100; opacity: 0.7; }
.sub-navi { width: 100%; }

.sub-cont {}
.inner { position: relative; width: 1200px; margin: 0 auto; padding: 60px 0; }
.sub-title { margin-bottom: 30px; }
.sub-title h3 { font-size: 24px; font-family: 'GongGothicBold'; font-weight: normal; }


/*=================================================================================
* Footer
=================================================================================*/
#Footer { padding: 50px 0; background-color: #333; margin-top: 100px; }
#Footer .inner { width: 100%; margin: 0 auto; text-align: center; padding: 0; justify-content: center; }
.footer h2 { font-size: 21px; color: #fff; margin-bottom: 20px; }
.footer-cont { width: 100%; }
.footer .link { margin-bottom: 40px; text-align: center; }
.footer .link.cf:after { content: ""; border-bottom: solid 1px rgba(255, 255, 255, 0.4); margin-top: 40px; }
.footer .link a { display: inline-block; line-height: 1; font-size: 16px; color: #fff; }
.footer .link span { color: #fff; margin: 0 10px; }
.footer p { font-size: 14px; margin-bottom: 8px; color: #fff; }
.footer p span { display: block; }
.footer .contact span { display: inline-block; vertical-align: text-bottom; line-height: 1; }
.footer .copyright { margin-top: 11px; color: #fff; }
#GoTop { display: none; position: fixed; bottom: 40px; right: 10px; width: 60px; height: 60px; border: 1px solid #000; border-radius: 60px; }
.long-arrow-top { display: block; margin: 0 auto; width: 20px; height: 20px; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(45deg); }
.long-arrow-top::after { content: ''; display: block; width: 2px; height: 30px; background-color: #000; transform: rotate(-45deg) translate(10px, 4px); left: 0; top: 0; }

/*=================================================================================
* tabs
=================================================================================*/
.tabs { width: 100%; margin: 0 auto; }
.tab-buttons { display: flex; justify-content: space-around; }
.tab-button { width: 50%; height: 64px; line-height: 70px; cursor: pointer; background-color: #f1f1f1; border: none; outline: none; font-size: 21px; color: #7e7e7e; }
.tab-button:nth-child(1) { border-radius: 10px 0 0 0; }
.tab-button:nth-child(2) { border-radius: 0 10px 0 0; }
.tab-button.active { background-color: #D4EBF2; color: #00738E; }
.tab-content { display: none; padding: 50px; border: 3px solid #D4EBF2; border-radius: 0 0 10px 10px; position: relative; }
.tab-content.active { display: block; }
.tab-content h2 { font-size: 21px; color: #00738E; }
.tab-content .info-box { margin-bottom: 70px; }
.tab-content .info-box dd { margin-bottom: 15px; font-size: 18px; display: flex; }
.tab-content .info-box dd span { display: block; }
.tab-content .info-box .label { width: 110px; font-weight: 700; padding-left: 30px; position: relative; }
.tab-content .info-box .label::before { content: ""; width: 17px; height: 17px; background: url("../img/bullet-airplane.svg"); position: absolute; left: 0; top: 5px; }
.tab-content .info-box .text { }
.tab-content .right-thumb { position: absolute; top: 0; right: 0; }
.tab-content ul { display: flex; justify-content: space-between; margin-top: 30px; }
.tab-content ul li { width: 24%; text-align: center; }
.tab-content ul li .circle { margin-bottom: 10px; }
.tab-content ul li div { line-height: 1.3; }
.tab-content ul li div span { font-size: 14px; color: #00738E; }

/*=================================================================================
* board
=================================================================================*/
.board-01 h3 { font-size: 26px; margin-bottom: 10px; position: relative; }
.board-01 h3 a { position: absolute; right: 0; bottom: 2px; font-size: 16px; font-weight: normal; padding-right: 30px; background: url(../img/more_icon.svg) top 4px right 8px no-repeat; }
.board-01 .board-title span { text-align: center; }
.board-01 .board-title dt .no, .board-01 .board-body dd .no { width: 15%; text-align: center; }
.board-01 .board-title dt .title, .board-01 .board-body dd .title { width: 70%; }
.board-01 .board-title dt .date, .board-01 .board-body dd .date { width: 15%; text-align: center; }
.board-01 .board-title dt, .board-01 .board-body dd { display: flex; justify-content: space-between; }
.board-01 .board-title dt span { font-size: 18px; }
.board-01 .board-title dt { border-top: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; padding: 15px 0 12px; }
.board-01 .board-body dd { border-bottom: solid 1px #e1e1e1; padding: 15px 0 12px; }

.board-02 { border-top: solid 1px#e1e1e1; padding-top: 10px; }
.board-02 ul { display: flex; flex-wrap: wrap; }
.board-02 ul li { width: 50%; margin-bottom: 10px; padding-bottom: 10px; display: flex; border-bottom: solid 1px#e1e1e1; }
.board-02 ul li.w-full { width: 100%!important; }
.board-02 ul li .th-title { width: 140px; font-weight: 700; position: relative; z-index: 10; }
.board-02 ul li .td-text { width: 70%; }
.board-02 ul li .td-text a {	text-decoration: underline; color: #2266D6; }
.board-02 ul li.w-full .td-text { width: 80%; }

.view-area { width: 100%; max-width: 1440px; margin: 0 auto 30px; }
.view-area .view-title { width: 100%; border-top: 1px solid #232323; }
.view-area .view-title h4 { line-height: 1.6; padding: 20px; font-size: 20px; color: #232323; margin-bottom: 0; word-wrap: break-word; font-weight: 500; }
.view-area .view-title .view-info { border-top: 1px solid #f1f1f1; padding: 20px 0; }
.view-area .view-title .view-info ul { display: inline-block; overflow: hidden; }
.view-area .view-title .view-info ul li { float: left; padding: 0 16px; font-size: 14px; line-height: 1.6; }
.view-area .view-title .view-info ul li + li { border-left: 1px solid #ccc; }
.view-area .view-title span { float: left; padding-right: 8px; }
.view-area .view-title .text { color: #707070; float: left; }
.view-area .view-title .text:before { content: ':'; padding-right: 8px; }
.view-area .view-cont { min-height: 350px; padding: 20px 20px 40px; font-size: 16px; color: #666; line-height: 1.6; word-wrap: break-word; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-weight: 500; }
.view-area .bo_info { width: 100%; padding: 20px; border-bottom: 1px solid #ccc; }

/*=================================================================================
* layer-select
=================================================================================*/
.custom-select { width: 150px; position: relative; user-select: none; }
.select-selected { cursor: pointer; }
.select-selected:after { content: ""; position: absolute; top: 5px; background: url("../img/location-arrow.svg") no-repeat; width: 17px; height: 12px; margin-left: 5px; }
.select-selected.select-arrow-active:after { transform: rotate(180deg); }
.select-items { position: absolute; background-color: #f1f1f1; width: 100%; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); z-index: 99; border-radius: 4px; border: 1px solid #ddd; }
.select-items div { padding: 10px; cursor: pointer; }
.select-items div a { color: #001541!important; display: block; width: 100%; height: 100%; }
.select-items div:hover { background-color: #ddd; }
.select-hide { display: none; }

/*=================================================================================
* pagenation
=================================================================================*/
.page_area { text-align:center;  /*border:1px solid #d3d3d3;*/ padding:21px 0; clear: both; }
.page_area a { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; border:1px solid #d3d3d3; text-decoration:none; margin:0 5px; color:#6a6a6a; border-radius: 5px; }
.page_area span.now_page { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; border:1px solid #00194D; text-decoration:none;margin:0 5px; color:#fff; background-color:#00194D; border-radius: 5px; }
.page_area a img{ vertical-align:top; }
.page_area a.btn { width:38px; }
.page_area a.on, .page_area a:hover { background-color:#00194D; color:#fff; border:1px solid #00194D; }

/*=================================================================================
* view
=================================================================================*/
.com-title { height: 300px; text-align: center; display: flex; align-content: center; flex-wrap: wrap; justify-content: center;	flex-direction: column;	border-radius: 10px; }
.com-title h2 { font-size: 46px; margin-bottom: 20px; }
.com-title .com-logo { width: 320px; height: 100px;	display: flex; margin: 0 auto; align-content: center; flex-wrap: wrap; justify-content: center;	background-color: #fff;	border-radius: 10px; border: solid 1px #e1e1e1; }
.com-detail h4 { font-size: 21px; margin: 20px 0; }

/*=================================================================================
* button
=================================================================================*/
.button-wrap { text-align: center; margin: 10px 0; }
.btn { display: inline-block; vertical-align: middle; padding: 0 22px; height: 46px; line-height: 46px; border-radius: 3px; overflow: hidden; text-align: center; transition: all ease 0.2s; cursor: pointer; outline: none; border: 0; }
.btn-small { height: 30px; line-height: 30px; font-size: 16px; padding: 0 10px; }
.btn-logout { margin-left: 20px; }
.btn-basic { background: #00738E; color: #fff; }
.btn-basic:hover { background: #0C2A6E; }
.btn-secondary { background: #73d0f5; color: #fff; }
.btn-secondary:hover { background: #34addd; }
.btn-purple { background: #4a477f; color: #fff; }
.btn-gray { background: #ccc; color: #fff; }
.btn-end { background: #666 !important; }
.btn-wrap { display: flex; padding: 30px 0; align-items: center; justify-content: center; }
.btn-wrap.left { justify-content: flex-start!important; }
.btn-wrap a { padding: 15px 30px; font-size: 21px; font-weight: 700; border-radius: 32px; color: #fff; margin-right: 10px; background-color: #0075BF; }
.btn-wrap a:last-child { margin-right: 0; }
.btn-wrap a.small { padding: 10px 20px; font-size: 18px; font-weight: 700; border-radius: 32px; color: #fff; background-color: #0075BF; }

/*=================================================================================
* schedule
=================================================================================*/
.sel-wrap {  width: 100%; position: relative; display: flex; justify-content: flex-end; margin-bottom: 20px; }
.sel-wrap .select {	position: relative;	border: 1px solid #d3d3d3; float: left; width: 260px; height: 46px;	line-height: 46px; background-color: #fff; background-repeat: no-repeat; background-position: right 50%; background: url(../img/ico_selectarrow.svg) center right 15px no-repeat; border-radius: 5px; }
.sel-wrap .select label { position: absolute; font-size: 16px; color: #343434; top: 9px; left: 12px; line-height: 1.35em; }
.sel-wrap .select select { width: 100%;	height: 35px; min-height: 35px;	line-height: 35px; padding: 0 10px;	border: 0; opacity: 0; filter: alpha(opacity=0); font-size: 14px; color: #343434; cursor: pointer; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box;	box-sizing: border-box; }
.tip-box { display: flex; align-items: center; }
.tip-box span { display: flex; margin-left: 20px; align-items: center; }
.tip-box span i { margin-right: 5px; }
.tip-box span i img { display: inherit; }
.tip-box span em { padding-top: 2px; }

.schedule-table { }
.schedule-box { font-size: 14px; width: 100%; border-left: solid 1px #e1e1e1; border-top: solid 1px #e1e1e1; }
.schedule-box tbody { /*border-top: solid 1.5px #111; */}
.schedule-box th strong, .schedule-box td strong { color: #121212; }
.schedule-box th { padding: 10px 0; border-right: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; }
.schedule-box th span { display: block; line-height: 5px; }
.schedule-box td { border-right: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; position: relative; height: 34px; padding: 0 20px; }
.schedule-box td em { font-size: 12px; color: #0075BF; }
.schedule-box td a { text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; }
.schedule-box td a i { background: url(../img/person-blue.svg) no-repeat; width: 24px; height: 24px; display: block; margin-right: 10px;}
.schedule-box td a.block { color: #999; }
.schedule-box td a.block i { background: url(../img/person-gray.svg) no-repeat; width: 24px; height: 24px; display: block; margin-right: 10px;}
.mr20 { margin-right: 20px!important; }

.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.popup-application { background-color: #fff; padding: 36px 20px; width: 80%; max-width: 740px; max-height: 700px; overflow-y: scroll; position: absolute; border-radius: 5px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.popup-application .title h2 { font-size: 24px; margin-bottom: 10px; color: #121212; }
.popup-application .title .btn-down { position: absolute; right: 20px; top: 35px; display: inline-block; padding: 7px 15px 5px; border-radius: 30px; background-color: #0493FF; font-weight: 700; color: #fff; }
.popup-application form > div > dl:first-child > dd { width: 100%; }
.popup-application .formbox { padding: 20px;}
.popup-application .formbox dl { padding: 17px 20px; }
.popup-application .formbox dl dd input[type="text"] { width: 280px; }
.popup-application .btn-wrap { display: flex; justify-content: center; }
.popup-application .btn-wrap input[type="submit"] { border: 0; border-radius: 10px; }
.popup-application .btn-wrap .btn { padding: 10px 20px; font-size: 18px; font-weight: 700; border-radius: 10px; color: #fff; margin: 0 10px; }
.btn.btn-blue { background-color: #0075BF; }
.btn.btn-gray { background-color: #969696; }

.info-wrap { }
.info-wrap .info-01 { text-align: center; margin-top: 100px; margin-bottom: 100px; }
.info-wrap .info-01 h2 { font-size: 21px; display: inline-block; background-color: #2E3281; padding: 15px 50px 10px; font-weight: 700; border-radius: 100px; color: #fff; margin-bottom: 50px; }
.info-wrap .info-01 h2 span { font-size: 16px; font-weight: 300; display: block; }
.info-wrap .info-01 dl { display: flex; flex-wrap: wrap; }
.info-wrap .info-01 dl dd { width: 15%; margin: 2%; border: solid 1px #e1e1e1; border-radius: 10px; padding: 10px; }
.info-wrap .info-02 { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.info-wrap .info-02 .bro-box { width: 33%; margin-top: 50px; }
.info-wrap .info-02 div { width: 49%; }
.info-wrap .info-02 h3 { font-size: 21px; display: inline-block; background-color: #2E3281; padding: 15px 50px 10px; font-weight: 700; border-radius: 100px; color: #fff; margin-bottom: 20px; }
.info-wrap .info-02 ul li { padding-left: 30px; margin-bottom: 20px; width: 90%; }
.info-wrap .info-02 ul li strong { display: block; font-size: 18px; color: #121212; }

.text-underline { text-decoration: underline; color: #0075BF; }

.charge { margin-top: 50px; }
.charge h3 { color: #121212; margin-bottom: 10px; font-size: 18px; }
.charge ul { display: flex; justify-content: space-between; }
.charge ul li { width: 48%; border: solid 1px #e1e1e1; border-radius: 20px; padding: 20px; display: flex; flex-wrap: wrap; }
.charge ul li span:first-child { width: 100%; margin-bottom: 10px; }
.charge ul li span { margin-right: 20px; }
.charge ul li span strong { color: #121212; }

/*=================================================================================
* modal
=================================================================================*/
.modal1 { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.modal1 .modal-content { background-color: #fff; padding: 20px; width: 80%; max-width: 640px; position: absolute; border-radius: 5px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.modal1 .modal-content h2 { font-size: 24px; margin: 0; text-align: left; padding-bottom: 10px; border-bottom: solid 1px #e1e1e1; }
.modal1 .close { position: absolute; top: 20px; right: 20px; cursor: pointer; width: 24px; height: 24px; background: url("../img/icon_close.svg") 50% 50% no-repeat; }
.popup-table .tip { margin-top: 10px; }
.popup-table ul li { width: 100%; padding: 10px 0; border-bottom: 1px solid #e1e1e1; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; font-size: 15px; }
.popup-table ul li  .title { width: 130px; padding-left: 10px; font-weight: 500; }
.popup-table ul li .input-box { flex: 1; position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.popup-table ul li .title span { font-size: 13px; color: #fd3c40; margin-left: 3px; }
.popup-table ul li .input-box input { width: 100%; }
.popup-table ul li .input-box label { width: auto !important; margin-right: 12px; display: flex; align-items: center; line-height: 40px; }
.input-box .w-full { width: 100%; margin-right: 0; }
.table-wrap .text-info { text-align: left; margin-bottom: 20px; }

/*=================================================================================
* pagination
=================================================================================*/
#pagination { position: relative; display: flex; justify-content: center; align-items: center; }
#pagination a { border: solid 1px #e1e1e1; width: 34px; height: 34px; line-height: 34px; text-align: center; margin: 0 5px; border-radius: 5px; }
#pagination a:hover, #pagination a.active { background-color: #454545; color: #fff; }
#pagination a.first { background: url("../img/first-arrow-b.svg") center center no-repeat; }
#pagination a.last { background: url("../img/end-arrow-b.svg") center center no-repeat;  }

/*=================================================================================
* Mobile Header
=================================================================================*/
.button-container { display: none; position: absolute; top: 50%; right: 6rem; width: 30px; height: 24px; margin-top: -12px; cursor: pointer; z-index: 120; transition: opacity 0.25s ease; }
.button-container.active .top { -webkit-transform: translateY(7px) translateX(0) rotate(45deg); transform: translateY(7px) translateX(0) rotate(45deg); background: #01286A; }
.button-container.active .middle { opacity: 0; background: #01286A; }
.button-container.active .bottom { -webkit-transform: translateY(-13px) translateX(0) rotate(-45deg); transform: translateY(-13px) translateX(0) rotate(-45deg); background: #01286A; }
.button-container span { background: #131313; border: none; height: 5px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; border-radius: 4px; }
.m_section_wrap .button-container span { background: #fff; }
.button-container span:nth-of-type(2) { top: 11px; }
.button-container span:nth-of-type(3) { top: 20px; }
.overlay { position: fixed; background: #fff; top: 0; right: 0; width: 100%; max-width: 100%; height: 100vh; opacity: 0; visibility: hidden; overflow: hidden; z-index: 100; box-shadow: -10px 0 10px 10px rgba(0, 0, 0, .16); }
.overlay.open li.item_1depth { -webkit-animation: fadeInRight 0.5s ease forwards; animation: fadeInRight 0.5s ease forwards; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
.overlay.open li.item_1depth:nth-of-type(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.overlay.open li.item_1depth:nth-of-type(3) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; }
.overlay.open li.item_1depth:nth-of-type(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.overlay nav { position: relative; top: 10%; }
.overlay .gnb_1depth { position: relative; width: 100%; height: 100%; margin: 0 auto; padding: 0 40px; text-align: left; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; align-items: flex-start; }
.overlay .gnb_1depth .item_1depth { width: 100%; position: relative; display: block; text-align: left; line-height: 1.2; cursor: pointer; margin: 0; }
.overlay .gnb_1depth .item_1depth:before, .overlay .gnb_1depth .item_1depth:after { position: absolute; right: 1.6rem; display: block; clear: both; content: ''; width: 10px; height: 2px; background: #131313; transition: all ease 0.1s; }
.overlay .gnb_1depth .item_1depth:before { transform: rotate(90deg); top: 30px; }
.overlay .gnb_1depth .item_1depth:after { transform: rotate(0deg); top: 30px; }
.overlay .gnb_1depth .item_1depth > a { display: block; position: relative; text-decoration: none; overflow: hidden; line-height: 1.2; border-bottom: 1px solid #e1e1e1; font-weight: 600; text-align: left; padding: 1.6rem; margin-bottom: 0; }
.overlay .gnb_1depth .item_1depth .gnb_2depth { display: none; }
.overlay .gnb_1depth .item_1depth .gnb_2depth a { padding: 1.6rem; display: block; border-bottom: solid 1px #e1e1e1; }

/*=================================================================================
* popup
=================================================================================*/
#hd_pop { z-index: 1000; position: relative; margin: 0 auto; width: 100%;  height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops { position: absolute; top: 0; border: 1px solid #e9e9e9; background: #fff; width: 100%; }
.hd_pops2 { position: absolute; top: 90px; left: 100px;  border: 1px solid #e9e9e9; background: #fff; width: 375px; }
.hd_pops3 { position: absolute; top: 90px; left: 690px; border: 1px solid #e9e9e9; background: #fff; width: 590px; }
.hd_pops4 { position: absolute; top: 0; left: 1120px; border: 1px solid #e9e9e9; background: #fff; width: 790px; }
.hd_pops_con { width: 100%; display: flex; background-color: #000; }
.hd_pops_con a { display: flex; }
.hd_pops_con img { max-width: 100%; }
.hd_pops_footer { padding: 10px 0; background: #000; color: #fff; text-align: right; overflow: hidden; }
.hd_pops_footer button { margin-right: 5px; padding: 2px 10px; border: 0; background: #000; font-size: 12px; color: #fff; float: left; }
.hd_pops_footer button:last-child{ float: right; }
.hd_pops_footer button span { width: 14px; height: 14px; background: url(../img/icn_close.svg) no-repeat; display: block; }
.hd_pops3 .hd_pops_con { width: 100%; display: flex; background-color: #000; }

.comingsoon-wr { width: 100%; height: 100%; }
.comingsoon-wr .pc { width: 100%; height: 100vh; background: url("../img/comingsoon.png") center center no-repeat; background-size: cover; position: relative; }
.comingsoon-wr .mobile { width: 100%; height: 100vh; background: url("../img/comingsoon-mo.png") center center no-repeat; display: none; background-size: cover; position: relative; }
.comingsoon-wr .pc .visual-text { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); }
.comingsoon-wr .mobile .visual-text { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 100%; text-align: center; }

/*=================================================================================
* response
=================================================================================*/
@media (max-width: 1200px) {
	/* 1200px 레이아웃 */	
    #GoTop { bottom: 50px; right: 50px; }
	.header { height: 80px; padding: 0 20px; }
	.header .inner { height: 100%; }
	.header .logo { width: 180px; }
	.header .gnb_links { margin-left: 0; }
	.header .gnb_links .link { min-width: 90px; max-width: 130px; }
	.header .gnb_links .link > a { font-size: 16px; line-height: 80px; }
	.header .lnb-bg { top: 80px; }
	.header_menu .gnb_2depth { top: 80px; }
	.header_menu .gnb_2depth .gnb_2depth-link a { font-size: 13px; padding: 0; }
	.gnb-right a { font-size: 13px; padding: 10px 10px 7px; }
    .overlay .gnb_1depth { flex-direction: column; padding: 0 20px; }
	.inner { width: 96%; }
}

@media screen and (max-width:768px) { 
	 /* 768px 레이아웃 */
	#hd_pop { display: none; }
	.btn-wrap { padding: 20px 0; }
	.modal1 .modal-content h2 { font-size: 18px; }
	.modal1 .modal-content { width: 96%; }
    #Header { height: 60px; line-height: 80px; }
    .header .logo { }
	.header .logo a { width: 200px; margin-bottom: 5px !important; }
	.header .header_menu { display: none; }
	.button-container { display: block; right: 0; top: 30px; }
	.hamburger { width: 35px; height: 35px; }
    .hamburger .line { height: 4px; margin: 6px auto; }
    #nav_trigger { margin-top: -17px; }
    #hamburger-2 .line:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); }
	.header .gnb_links .link { min-width: 100%; max-width: 100%; }
	.header .gnb_links .link a { font-size: 15px; line-height: 25px; }
    .overlay .gnb_1depth .item_1depth > a { font-size: 19px; }
    .overlay .gnb_2depth { display: none; }
	.overlay .gnb_1depth .item_1depth.active .gnb_2depth { display: block; }
	.header .gnb_links .link > a:after { display: none; }
	.gnb-right { display: none; }
	.gnb-left { position: absolute; left: 20px; top: -10px; }
	#Footer { margin-top: 50px; }
	#Footer .inner { width: 95%; text-align: left; flex-direction: column; align-items: flex-start; }
    .footer-logo { margin: 0 20px 20px 0; }
	.footer h2 { text-align: center; font-size: 16px; }
    .footer p { font-size: 11px; margin-bottom: 4px; margin-left: 15px; text-align: left; }
    .footer-cont { width: 100%; }
    .footer .link a { font-size: 14px; }
	.inner { padding: 30px 0; width: 90%; }
	.sel-wrap { flex-direction: column; }
	.ac_area { display: flex; margin-bottom: 20px; }
	.sel-wrap .select { width: 49%; margin-right: 5px; }
	.schedule-table { width: 100%; overflow-x: scroll; }
	.schedule-box { width: 1200px; }
	.tip-box span:first-child { margin-left: 0; }
	.sel-wrap .select label { font-size: 13px; top: 11px; }
	.popup-application { width: 94%; }
	.popup-application .formbox dl { padding: 12px 0; flex-direction: column; }
	.popup-application .formbox dl dt, .popup-application .formbox dl dd { width: 100%; }
	.popup-application .formbox dl dt { margin-bottom: 10px; }
	.popup-application .formbox { padding: 20px 10px; }
	.flex { flex-direction: row; flex-wrap: wrap; }
	.info-wrap .info-01 { margin-top: 50px; margin-bottom: 50px; }
	.info-wrap .info-01 dl dd { width: 29%; }
	.info-wrap .info-01 h2, .info-wrap .info-02 h3 { font-size: 16px; padding: 10px 30px 5px; }
	.info-wrap .info-01 h2 spna { font-size: 14px; }
	.info-wrap .info-02 { flex-direction: column; }
	.info-wrap .info-02 div, .info-wrap .info-02 .bor-box { width: 100%!important; }
	.info-wrap .info-02 ul li { padding-left: 10px; }
	.info-wrap .info-02 ul li strong { font-size: 16px; }
	.offline-fair { padding: 0; border: 0; }
	.charge ul { flex-direction: column; }
	.charge ul li { width: 100%; margin-bottom: 20px; }
	.charge ul li:last-child { margin-bottom: 0; }
	
	.visual .visual-box {  width: 90%!important; position: absolute; left: 5%; bottom: -10px!important; }
	.tab-button { font-size: 18px; height: 54px; line-height: 60px; }
	.tab-content { padding: 30px 20px; }
	.tab-content h2 { margin-bottom: 10px; }
	.tab-content .info-box dd { font-size: 16px; flex-direction: column; }
	.tab-content .info-box dd .text { padding-left: 16px; }
	.tab-content .info-box { padding-top: 0; }
	.tab-content .right-thumb { z-index: -1; opacity: 0.5; }
	.tab-content ul li, .tab-content ul li div span { font-size: 13px; }
	.tab-content ul { justify-content: space-around; flex-wrap: wrap; }
	.tab-content ul li { width: 40%; }
	.tab-content ul li:nth-child(1), .tab-content ul li:nth-child(2) { margin-bottom: 20px; }
	
	/* board */
	.board-title { display: none; }
	.board-01 .board-body { border-top:  solid 1px #e1e1e1; }
	.board-01 .board-body dd { flex-wrap: wrap; padding: 15px; }
	.board-01 .board-body dd .no { display: none; }
	.board-01 .board-body dd .title { width: 100%; font-family: 'GongGothicBold'; }
	.board-01 .board-body dd .date { width: 100%; text-align: left; color: #666; }
	
	/* sub */
	.sub-visual .sub-navi em { margin: 0 5px; }
	.sub-visual .sub-navi { width: 90%; margin: 100px auto 0; }
	.sub-visual .sub-navi h2 { font-size: 24px; }
	.sub-visual { height: 240px; background: url(../img/sub-top.svg) center right -150px no-repeat; background-size: cover; }
	.sub-visual.sub-01, .sub-visual.sub-02, .sub-visual.sub-03, .sub-visual.sub-04, .sub-visual.sub-05, .sub-visual.sub-06 { background: url(../img/sub-top.svg) center right -150px no-repeat; background-size: cover; }
	.fes-box .poster-box { margin-right: 0; }
	.fes-box .info-box dd { font-size: 16px; flex-direction: column; }
	.fes-box .info-box dd .text { padding-left: 16px; }
	.fes-box .info-box { padding-top: 0; }
	.fes-box .info-box ul li,  .fes-box .info-box ul li div span { font-size: 13px; }
	.fes-box .info-box ul { justify-content: space-around; flex-wrap: wrap; }
	.fes-box .info-box ul li { width: 40%; margin-right: 0; }
	.fes-box .info-box ul li:nth-child(1), .fes-box .info-box ul li:nth-child(2) { margin-bottom: 20px; }
	
	.com-title { height: auto; margin-bottom: 30px; }
	.com-title h2 { font-size: 26px; }
	.board-02 ul li { width: 100%; }
	.board-02 ul li .th-title { width: 30%; }
	.board-02 ul li .td-text, .board-02 ul li.w-full .td-text { width: 70%; }
	.popup-table ul li { padding: 7px 0; }
	.popup-table ul li .title { width: 30%; padding-left: 0; font-size: 15px; }
	.popup-table ul li .input-box { font-size: 15px; }
}