@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;600;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url(contents.css);
@import url(board.css);

/* ==============================================
   defaults
   ============================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
ol, ul { list-style:none;}
blockquote, q {	quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse:collapse; border-spacing:0;}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
input, select { margin:0; padding:0; vertical-align:middle;}
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

.ir { background-color: transparent; border: 0; overflow: hidden; text-indent:-9999px;}
.ir:before { content: ""; display: block; width: 0; height: 150%; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix {  *zoom: 1;}
.hidden { display:none;}

/* box sizing */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/* ==============================================
   layout
   ============================================== */

html { overflow:auto; overflow-y:scroll;}
input,
select,
button,
textarea,
body { color:#000; font-size:16px; font-family:'Montserrat', 'Pretendard', 'Nanum Gothic', 'dotum', '돋움', 'gulim', '굴림', arial !important; }

html { height: 100%; }
body.no-scroll { height: 100%; overflow:hidden; }


#wrap {}
#wrapIn {}

.forPC { display: block !important;}
.forMobile { display: none !important;}
.mobileMenu { display: none;}

/* header */

#header { position: relative; height: 100px; background-color: #fff; z-index: 99;
	-moz-box-shadow: 0px 3px 40px rgba(0,0,0,.13);
	-webkit-box-shadow: 0px 3px 40px rgba(0,0,0,.13);
	box-shadow: 0px 3px 40px rgba(0,0,0,.13);
}
#header .headerIn { position: relative; width: 80%; min-width: 1200px; height: 100%; margin: 0 auto; }
#header h1 { position: relative; left: 0; top: 0; width: 224px; z-index: 100; }
#header h1 a { display: block; height: 100px; text-indent: -9999px; background: url(../images/common/top_logo.png) center center no-repeat; }

/* menu */

.menu-toggle {
	position: relative;
	width: 30px;
	height: 20px;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -10px;
	cursor: pointer;
	z-index: 100;
}

.menu-toggle:before,
.menu-toggle:after {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background: #000;
	position: absolute;
	left: 0;
	transition: all 0.3s ease;
}

.menu-toggle:before {
	top: 3px;
}

.menu-toggle:after {
	bottom: 3px;
}

/* X 모양으로 변환될 때 */
.menu-toggle.active-menu-toggle:before {
	transform: rotate(45deg);
	top: 9px; /* 가운데로 이동 */
}

.menu-toggle.active-menu-toggle:after {
	transform: rotate(-45deg);
	bottom: 9px; /* 가운데로 이동 */
}

.global-menu{
	position:fixed; inset:0;
	background:rgba(255,255,255,.85);
	backdrop-filter:blur(6px);
	opacity:0; visibility:hidden; transform:translateY(-2%);
	transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
	z-index: 99;
}
.global-menu.open{
	opacity:1; visibility:visible; transform:none;
}

/* global menu */

.global-menu { display: flex; justify-content: center; align-items: center; }
.global-menu ul.list { display: flex; justify-content: space-between; width: 1200px; }
.global-menu ul.list a { color: #000; text-decoration: none; }
.global-menu ul.list a:hover { color: #0bb1e1; }
.global-menu ul.list > li {}
.global-menu ul.list > li > a { display: block; line-height: 46px; font-size: 32px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.global-menu ul.list > li > a span {}
.global-menu ul.list > li > p.exp { position: relative; line-height: 24px; font-size: 17px; color: #4c4c4c; font-weight: 300; padding-bottom: 14px; margin-top: 14px; }
.global-menu ul.list > li > p.exp:after { content: " "; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background-color: #0bb1e1; }
.global-menu ul.list > li ul.sub { margin-top: 38px; }
.global-menu ul.list > li ul.sub > li { text-align: center; }
.global-menu ul.list > li ul.sub > li a { display: block; line-height: 36px; font-size: 20px; font-weight: 500; }
.global-menu ul.list > li ul.sub > li a span { position: relative; display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; padding-left: 11px; margin-left: 11px; }
.global-menu ul.list > li ul.sub > li a span:after { content: " "; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background-color: #bbb; margin-top: -7px; }

/* gnb */

#header .gnb { position: absolute; right: 94px; top: 0; 
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#header .gnb > ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#header .gnb > ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#header .gnb > ul.list {}
#header .gnb > ul.list > li { position: relative; float: left; }
#header .gnb > ul.list > li > a { display: block; height: 100px; line-height: 100px; color: #000; font-size: 19px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.07em; padding: 0 30px; }
#header .gnb > ul.list > li > a:hover { color: #0bb1e1; }
#header .gnb > ul.list > li > a span { display: block; position: relative; height: 100%; }
#header .gnb > ul.list > li.active > a  { color: #0bb1e1; }
/*#header .gnb > ul.list > li.active > a span:after { content: " "; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #0bb1e1; 
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}*/
/*#header .gnb > ul.list > li.active > a:hover span:after { opacity: 0; }*/

#header .gnb > ul.list > li > ul.sub { display: none; position: absolute; left: 50%; top: 100px; width: 240px; background-color: #fff; margin-left: -120px; z-index: 999;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
#header .gnb > ul.list > li:hover > ul.sub { display: block; }
#header .gnb > ul.list > li > ul.sub > li { border-bottom: 1px solid #dedede; }
#header .gnb > ul.list > li > ul.sub > li.last { border-bottom: 0; }
#header .gnb > ul.list > li > ul.sub > li > a { display: block; height: 46px; line-height: 46px; font-size: 16px; color: #2a2a2a; text-align: center; text-decoration: none; padding: 0 16px; }
#header .gnb > ul.list > li > ul.sub > li > a:hover { color: #fff; background-color: #0bb1e1; }

#header .gnb > ul.list > li > ul.sub > li > ul.sub2d { display: none; }

/* footer */

#footer { line-height: 26px; font-size: 16px; font-weight: 300; border-top: 1px solid #d3d3d3; padding: 50px 0; }
#footer a { color: #000; text-decoration: none; }
#footer a.call { font-weight: 600; }
#footer a.call:hover { color: #0bb1e1; }
#footer .footerIn { position: relative; width: 1200px; padding-right: 300px; margin: 0 auto; }
#footer h1 { position: absolute; right: 0; top: 0; width: 224px; height: 60px; text-indent: -9999px; background: url(../images/common/top_logo.png) center center no-repeat; }

#footer ul.footMenu { display: flex; }
#footer ul.footMenu li { position: relative; height: 32px; padding-left: 17px; margin-left: 16px; }
#footer ul.footMenu li:after { content: " "; position: absolute; left: 0; top: 50%; height: 14px; width: 1px; background-color: #c2c2c2; margin-top: -7px; }
#footer ul.footMenu li:first-child { padding-left: 0; margin-left: 0; }
#footer ul.footMenu li:first-child:after { display: none; }
#footer ul.footMenu li a { line-height: 32px; font-size: 17px; font-weight: 400; }
#footer ul.footMenu li a:hover { text-decoration: underline; }

#footer p.address { margin-top: 30px; }

#footer ul.contact { display: flex; }
#footer ul.contact li { position: relative; height: 26px; padding-left: 17px; margin-left: 16px; }
#footer ul.contact li:after { content: " "; position: absolute; left: 0; top: 50%; height: 14px; width: 1px; background-color: #c2c2c2; margin-top: -7px; }
#footer ul.contact li:first-child { padding-left: 0; margin-left: 0; }
#footer ul.contact li:first-child:after { display: none; }

#footer p.copyright { margin-top: 6px; }



/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

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

	body { font-size:15px; }

	.forPC { display: none !important;}
	.forMobile { display: block !important;}

	.mobileMenu { display: block; width: auto; height: 40px; line-height: 40px; font-size: 15px; text-align: center; color: #fff; background-color: #015a8e; margin: 0 10px;}
	.mobileMenu { display: block; position: absolute; right: 20px; top: 28px; width: 33px; height: 23px; text-indent: -9999px; background: #11bdd2 url(../images/mobile/top_btn_menu.png) 0 0 no-repeat; -webkit-background-size: 33px auto; background-size: 33px auto;}


	/* header */

	#header { height: 80px; padding: 0 20px; }
	#header .headerIn { width: 100%; min-width: auto; }
	#header h1 { width: 180px; }
	#header h1 a { height: 80px; background-size: 180px auto; }

	/* global menu */

	.global-menu ul.list { flex-wrap: wrap; gap: 60px 0; width: 100%; padding: 0 20px; }
	.global-menu ul.list > li { width: 50%; text-align: center; padding: 0 5px; }
	.global-menu ul.list > li > a { line-height: 36px; font-size: 22px; letter-spacing: 0.02em; }
	.global-menu ul.list > li > p.exp { display: none; }
	.global-menu ul.list > li ul.sub { margin-top: 16px; }
	.global-menu ul.list > li ul.sub > li a { line-height: 36px; font-size: 18px; font-weight: 400; }
	.global-menu ul.list > li ul.sub > li a span { display: none; }

	/* gnb */

	#header .gnb { display: none; }

	/* footer */

	#footer { line-height: 24px; font-size: 15px; padding: 30px 0; }
	#footer .footerIn { width: auto; padding: 0 20px; }
	#footer h1 { display: none; }

	#footer ul.footMenu { flex-wrap: wrap; justify-content: center; }
	#footer ul.footMenu li { height: 26px; padding-left: 0; margin-left: 12px; }
	#footer ul.footMenu li:after { display: none; }
	#footer ul.footMenu li a { line-height: 26px; font-size: 15px; }

	#footer p.address { margin-top: 20px; }

	#footer ul.contact { flex-direction: column; }
	#footer ul.contact li { font-size: 14px; padding-left: 0; margin-left: 0; }
	#footer ul.contact li:after { display: none; }

	#footer p.copyright { font-size: 14px; margin-top: 6px; }

	.hd_pops { width: calc(100% - 20px); }
	.hd_pops_con { width: 100% !important; height: auto !important; }

}

/* ==============================================
   main
   ============================================== */

/* visual */

.visWrap { position: relative; height: 760px;}
#mainVisual ul.slides,
#mainVisual .flex-viewport { height: 100%; }
#mainVisual { width: 100%; min-width: 1200px; height: 100%; border: 0; padding: 0; margin: 0; overflow: hidden; }
#mainVisual ul.slides { padding: 0; margin: 0; }
#mainVisual ul.slides li { position: relative; width: 100%; height: 100%; 
	display: none; 
	-webkit-backface-visibility: hidden;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#mainVisual ul.slides li .con { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; margin-left: -600px; }

#mainVisual ul.slides li p.sub { line-height: 58px; font-size: 48px; color: #0bb1e1; font-weight: 500; 
	text-shadow: 0px 2px 2px rgba(0,0,0,.15);
}
#mainVisual ul.slides li p.slogan { line-height: 90px; font-size: 72px; color: #fff; font-weight: 600;
	text-shadow: 0px 2px 2px rgba(0,0,0,.15);
}
#mainVisual ul.slides li p.exp { line-height: 32px; font-size: 22px; color: #fff; margin-top: 38px; }

#mainVisual ol.flex-control-nav { position: absolute; display: flex; align-items: center; justify-content: center; gap: 6px; left: 0; bottom: 60px; width: 100%; height: 18px; text-align: center; z-index: 9; }
#mainVisual ol.flex-control-nav li { margin: 0 3px; }
#mainVisual ol.flex-control-nav li a { display: block; width: 14px; height: 14px; text-indent: -9999px; background-color: #fff; cursor: pointer;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
#mainVisual ol.flex-control-nav li a.flex-active { width: 52px; background-color: #0bb1e1; }

#mainVisual ul.flex-direction-nav li a { position: absolute; top: 50%; width: 52px; height: 100px; text-indent: -9999px; margin-top: -50px; opacity: 0.5; z-index: 9; }
#mainVisual ul.flex-direction-nav li a:hover { opacity: 1; }
#mainVisual ul.flex-direction-nav li a.flex-prev { left: 50px; background: url(../images/main/visual_nav_prev.png) center center no-repeat; background-size: auto 70px; }
#mainVisual ul.flex-direction-nav li a.flex-next { right: 50px; background: url(../images/main/visual_nav_next.png) center center no-repeat; background-size: auto 70px; }

/* visual : right */

#mainVisual ul.slides li.conRight .con { left: auto; right: 50%; align-items: flex-end; margin-left: 0; margin-right: -600px; }
#mainVisual ul.slides li.conRight p.book { right: auto; left: 50%; margin-right: 0; margin-left: -600px; }
#mainVisual ul.slides li.conRight p.logo {}
#mainVisual ul.slides li.conRight p.title,
#mainVisual ul.slides li.conRight p.exp { text-align: right; }


/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

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

	/* visual */

	.visWrap { height: 360px;}
	#mainVisual { min-width: auto; }
	#mainVisual ul.slides li .con { position: relative; left: auto; top: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; word-break: keep-all; padding-top: 40px; margin-left: 0; }

	#mainVisual ul.slides li p.sub { line-height: 34px; font-size: 24px; }
	#mainVisual ul.slides li p.slogan { line-height: 50px; font-size: 32px; }
	#mainVisual ul.slides li p.exp { line-height: 22px; font-size: 15px; margin-top: 8px; padding: 0 40px; }
	#mainVisual ul.slides li p.exp br { display: none; }

	#mainVisual ol.flex-control-nav { bottom: 30px; }
	#mainVisual ul.flex-direction-nav li a { display: none; }

	/* visual : right */

	#mainVisual ul.slides li.conRight .con { left: auto; right: 50%; align-items: flex-end; margin-left: 0; margin-right: -600px; }
	#mainVisual ul.slides li.conRight p.book { right: auto; left: 50%; margin-right: 0; margin-left: -600px; }
	#mainVisual ul.slides li.conRight p.logo {}
	#mainVisual ul.slides li.conRight p.title,
	#mainVisual ul.slides li.conRight p.exp { text-align: right; }

}


/* content */

#mainBody .contentWrap { display: flex; width:1200px; margin: 80px auto 0; }
#mainBody .contentWrap > div { width: 50%; height: 340px; background-color: #e5e5e6; padding: 30px 20px 0 50px; }
#mainBody .contentWrap > div h3 { line-height: 36px; font-size: 28px; color: #000; font-weight: 600; margin-bottom: 11px; }
#mainBody .contentWrap > div h3 span.en { display: block; line-height: 20px; font-size: 14px; color: #676767; font-weight: 400; text-transform: uppercase; }

#mainBody .contentWrap .time {}
#mainBody .contentWrap .time p.text { line-height: 22px; margin-bottom: 22px; }
#mainBody .contentWrap .time .con { position: relative; padding-left: 175px; }
#mainBody .contentWrap .time .con:after { content: " "; position: absolute; left: 0; top: 50%; width: 120px; height: 120px; background: #fff url('../images/main/time_icon.png') center center no-repeat; margin-top: -60px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
#mainBody .contentWrap .time .con ul.openHours {}
#mainBody .contentWrap .time .con ul.openHours li { line-height: 26px; font-size: 20px; color: #0bb1e1; font-weight: 700; margin-bottom: 10px; }
#mainBody .contentWrap .time .con ul.openHours li:last-child { margin-bottom: 0; }
#mainBody .contentWrap .time .con ul.openHours li span.title { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; width: 76px; color: #000; font-weight: 400; }
#mainBody .contentWrap .time .con p.lunch { line-height: 24px; font-size: 16px; margin-top: 8px; }
#mainBody .contentWrap .time .con ul.etc { margin-top: 18px; }
#mainBody .contentWrap .time .con ul.etc li { line-height: 24px; font-size: 16px; }

#mainBody .contentWrap .map { background: #056099 url('../images/main/map_img02.jpg') left top no-repeat; }
#mainBody .contentWrap div.map h3 { color: #fff; }
#mainBody .contentWrap div.map h3 span.en { color: #9cc1d8; }

/* link */

#mainBody .linkWrap { padding: 62px 0 90px; }
#mainBody .linkWrap ul.link { display: flex; justify-content: center; gap: 10px; }
#mainBody .linkWrap ul.link li { width: 170px; }
#mainBody .linkWrap ul.link li a { display: block; color: #000; text-decoration: none; }
#mainBody .linkWrap ul.link li a:hover { color: #0bb1e1; }
#mainBody .linkWrap ul.link li a p.icon { width: 130px; height: 130px; line-height: 130px; text-align: center; background-color: #ededed; margin: 0 auto;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#mainBody .linkWrap ul.link li a:hover p.icon { background-color: #e2e2e2; }
#mainBody .linkWrap ul.link li a p.icon:before { content: ""; display: inline-block; height: 100%; vertical-align: middle;}
#mainBody .linkWrap ul.link li a p.icon img { vertical-align:middle;}
#mainBody .linkWrap ul.link li a p.title { line-height: 26px; font-size: 17px; font-weight: 500; text-align: center; margin-top: 18px; }


/* mediaquery for mobile */

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

	/* content */

	#mainBody .contentWrap { flex-direction: column; width:auto; margin: 0; }
	#mainBody .contentWrap > div { width: 100%; height: auto; padding: 30px 20px; }
	#mainBody .contentWrap > div h3 { line-height: 30px; font-size: 22px; margin-bottom: 16px; }
	#mainBody .contentWrap > div h3 span.en { line-height: 18px; font-size: 13px; }

	#mainBody .contentWrap .time {}
	#mainBody .contentWrap .time p.text { line-height: 22px; margin-bottom: 22px; }
	#mainBody .contentWrap .time .con { padding-left: 0; }
	#mainBody .contentWrap .time .con:after { display: none; 	}
	#mainBody .contentWrap .time .con ul.openHours li { line-height: 24px; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
	#mainBody .contentWrap .time .con p.lunch { line-height: 22px; font-size: 15px; margin-top: 4px; }
	#mainBody .contentWrap .time .con ul.etc li { line-height: 22px; font-size: 15px; }

	#mainBody .contentWrap .map { height: 300px; background-size: auto 300px; background-position: top center; }

	/* link */

	#mainBody .linkWrap { padding: 30px 20px; }
	#mainBody .linkWrap ul.link { flex-wrap: wrap; gap: 20px 10px; }
	#mainBody .linkWrap ul.link li { width: calc(50% - 10px); }
	#mainBody .linkWrap ul.link li:last-child { display: none; }
	#mainBody .linkWrap ul.link li a p.icon { width: 100px; height: 100px; line-height: 100px; }
	#mainBody .linkWrap ul.link li a p.icon img { width: auto; height: 46px; }
	#mainBody .linkWrap ul.link li a p.title { line-height: 24px; font-size: 16px; margin-top: 12px; }

}