@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

@font-face {
  font-family: "ArnoDisplayLight";
  src: url('font/ArnoDisplayLight.woff2') format('woff2'), url('font/ArnoDisplayLight.woff') format('woff');
}

@font-face {font-family: "ctg1";
  src: url("font/ChronicleTextG1-Roman.eot"); /* IE9*/
  src: url("font/ChronicleTextG1-Roman.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("font/ChronicleTextG1-Roman.woff2") format("woff2"), /* chrome、firefox */
  url("font/ChronicleTextG1-Roman.woff") format("woff"), /* chrome、firefox */
  url("font/ChronicleTextG1-Roman.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("font/ChronicleTextG1-Roman.svg#ChronicleTextG1-Roman") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Bodoni";
  src: url("font/BodoniSvtyTwoSCITCTT-Book.eot"); /* IE9*/
  src: url("font/BodoniSvtyTwoSCITCTT-Book.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("font/BodoniSvtyTwoSCITCTT-Book.woff2") format("woff2"), /* chrome、firefox */
  url("font/BodoniSvtyTwoSCITCTT-Book.woff") format("woff"), /* chrome、firefox */
  url("font/BodoniSvtyTwoSCITCTT-Book.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("font/BodoniSvtyTwoSCITCTT-Book.svg#BodoniSvtyTwoSCITCTT-Book") format("svg"); /* iOS 4.1- */
}


/* ==============================================
   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;
}


/* ==============================================
   Admin
   ============================================== */

.customize-partial-edit-shortcut {display: none !important;}


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

html,
body.home {height: 100%;}

html { overflow:auto; overflow-y:scroll;}
body { color:#181818; line-height: 24px; font-size:14px; font-family: ArnoDisplayLight, '맑은 고딕','Malgun Gothic',나눔고딕,'Nanum Gothic',돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif; letter-spacing: 0.05em; background: #fff;}

#wrap { padding-top: 60px; }
body.home #wrap {height: 100%;padding-top: 0;}

/* header */

#wrap > header { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 60px; border-bottom: 1px solid #eeeeee; background-color: #fff; padding: 0 10px; margin: 0 auto; z-index: 9999; }
body.home #wrap > header { border: 0; background-color: transparent; }

#wrap > header h1 { width: 120px; height: 59px; margin: 0 auto; }
#wrap > header h1 a { display: block; line-height: 59px; color: #000; font-size: 21px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; font-weight: normal; text-align: center; }
/*#wrap > header h1 a:hover { color: #aaa; }*/

#wrap > header a.fmOpen { position: absolute; left: 10px; top: 0; width: 49px; height: 49px; text-indent: -9999px; background: url(../images/common/menu.png) center center no-repeat; }


.menu-toggle,
.close-menu-toggle {
  position: absolute;
  left: 25px;
  top: 22px;
  z-index: 99999;
  display: flex;
  align-items: center;
  width: 16px;
  height: 17px;
  outline: 0 none; }
  .menu-toggle:before, .menu-toggle:after,
  .close-menu-toggle:before,
  .close-menu-toggle:after {
    content: '';
    position: absolute;
    width: 16px;
    background: #181818;
    height: 1px;
    right: 0;
    transition: all 0.2s cubic-bezier(0.49, 0.01, 0.49, 0.99); }
  .menu-toggle:before,
  .close-menu-toggle:before {
    top: 0; }
  .menu-toggle:after,
  .close-menu-toggle:after {
    top: 16px; }
  .menu-toggle span,
  .close-menu-toggle span {
    display: block;
    width: 100%;
    background: #181818;
    height: 1px;
    transition: all 0.2s cubic-bezier(0.49, 0.01, 0.49, 0.99); }
  .menu-toggle.active-menu-toggle span,
  .close-menu-toggle.active-menu-toggle span {
    opacity: 0; }
  .menu-toggle.active-menu-toggle:before,
  .close-menu-toggle.active-menu-toggle:before {
    transform: rotate(45deg);
    top: 7px;
    width: 20px;
    right: -1px; }
  .menu-toggle.active-menu-toggle:after,
  .close-menu-toggle.active-menu-toggle:after {
    top: 7px;
    width: 20px;
    right: -1px;
    transform: rotate(-45deg); }

.close-menu-toggle {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer; }
  .close-menu-toggle span {
    display: none; }
  .close-menu-toggle:before {
    transform: rotate(45deg);
    top: 7px;
    width: 20px;
    right: -1px;
    background: #181818; }
  .close-menu-toggle:after {
    top: 7px;
    width: 20px;
    right: -1px;
    transform: rotate(-45deg);
    background: #181818; }

/* white version */

#wrap.white > header h1 a {color: #fff;}

#wrap.white .menu-toggle:before, #wrap.white .menu-toggle:after,
#wrap.white .close-menu-toggle:before,
#wrap.white .close-menu-toggle:after {
    background: #fff; }
#wrap.white .menu-toggle span,
#wrap.white .close-menu-toggle span {
    background: #fff; }


/* mediaquery for admin-bar */

@media only screen and (min-width: 783px) {

	body.admin-bar #wrap > header { top: 32px; }

}

/* mediaquery for moble */

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

	/* admin bar */

	body.admin-bar #wrap > header { top: 46px; }

	/* header */

	#wrap > header { padding: 0; }

	body.home #wrap > header {}
	#wrap > header h1 { position: relative; right: auto; top: auto; width: 50%; transform: none; text-align: center; margin: 0 auto; }
	#wrap > header h1 a { font-size: 15px; padding: 0 0 0 8px; }

	#wrap > header a.fmOpen { left: 30px; width: 30px; text-indent: -9999px; background-position: left center; padding-right: 0;}

}


/* full menu */

.fullMenu { display: none; position: fixed; left: 0; top: 0; width: 450px; height: 100vh; z-index: 99998; overflow: scroll-y; 
	/*background-color: #fff;*/
	background-color: rgba(255,255,255,.5);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}
.fullMenu .fullMenuCon { position: relative; width: 100%; height: 100%; padding: 0 10px; margin: 100px auto 0; }
.fullMenu ul.menu {}
.fullMenu ul.menu li { padding: 0 20px; margin-bottom: 10px; }
.fullMenu ul.menu li a { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; height: 32px; line-height: 32px; color: #2c2c2c; font-size: 17px; font-weight: 300; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid transparent; }
.fullMenu ul.menu li a:hover { color: #000; border-bottom: 1px solid #000; }

.fullMenu .footer {display: flex;padding: 0 20px;margin-top: 70px;}

.fullMenu .claude { width: 134px; color: #2c2c2c; }
.fullMenu .claude p.title { font-size: 13px; color: #2c2c2c; font-weight: 300; text-transform: uppercase; letter-spacing: .1em; }

.fullMenu ul.etcMenu {*zoom:1;} /* Hack for browser IE5.5~7 */
.fullMenu ul.etcMenu:after { content:" "; display:block; clear:both;} /* float virtual element */
.fullMenu ul.etcMenu {}
.fullMenu ul.etcMenu li { float: left; margin-right: 40px; }
.fullMenu ul.etcMenu li:last-child {margin-right: 0;}
.fullMenu ul.etcMenu li a { font-size: 13px; color: #2c2c2c; letter-spacing: .1em; text-decoration: none; }
.fullMenu ul.etcMenu li a:hover { color: #2c2c2c; text-decoration: underline; }

.fullMenu a.fmClose { position: absolute; left: 10px; top:0; width: 49px; height: 49px; text-indent: -9999px; background: url(../images/common/menu_close.png) center center no-repeat; }


/* mediaquery for admin-bar */

@media only screen and (min-width: 783px) {

	 body.admin-bar .fullMenu { top: 32px; }

}

/* mediaquery for moble */

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

   #wpadminbar { position: fixed !important; }

}

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

	/* admin-bar */

	body.admin-bar .fullMenu { top: 46px; }

	/* full menu */

	.fullMenu { width: 100%; }
	.fullMenu .fullMenuCon { margin: 80px auto 0; }
	.fullMenu ul.menu li a { height: 26px; line-height: 26px; font-size: 15px; }

	.fullMenu .footer { display: flex; flex-direction: column; margin-top: 50px;}

	.fullMenu .claude { margin-bottom: 16px; }

	.fullMenu ul.etcMenu {}
	.fullMenu ul.etcMenu li { float: none; margin-right: 0; }

}


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

#mainBody {position: relative;height: 100%;}

/* visual */

#mainBody .mainVisual {position: relative;height: 100%;
	-webkit-backface-visibility: hidden;
	background-position: top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#mainBody .mainVisual .mobileVisual {width: 100%;height: 100%;
	-webkit-backface-visibility: hidden;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#mainBody p.link {position: absolute;left: 0;bottom: 90px;width: 100%;text-align: center;}
#mainBody p.link a {display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline;font-size: 13px;color: #000;letter-spacing: 0.2em;text-decoration: none;}
#mainBody p.link a span {display: block;height: 25px;line-height: 24px;border-bottom: 1px solid #000;}
#mainBody p.link a:hover {}
#mainBody p.link a:hover span {}

#wrap.white #mainBody p.link a {color: #fff;}
#wrap.white #mainBody p.link a span {border-bottom-color: #fff;}

/* mediaquery for moble */

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

	#mainBody p.link {bottom: 40px;}

}

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

	#mainBody .mainVisual {background: none !important;}
	#mainBody .mainVisual p.img {display: none;}
	#mainBody .mainVisual .mobileVisual {display: block;}

	#mainBody p.link { bottom: 40px; }
	#mainBody p.link a { font-size: 12px; }
	#mainBody p.link a span { height: 21px;line-height: 20px; }

}

@media only screen and (min-width: 739px) {

	#mainBody .mainVisual .mobileVisual {display: none;background: none !important;}

}