@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url(https://cdn.jsdelivr.net/xeicon/1/xeicon.min.css);
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);
@import url(css/kjcgothic.css);
@import url(css/blank.css);

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.05rem;color:inherit;}
img {border:0;vertical-align:top;}
a {border:0; text-decoration:none; color:inherit;}
ul, li {list-style:none;}
div {display:block;}
html {overflow-y:scroll;height:100%;min-width:320px}
body {height:100%; font-family: agenda, "Pretendard Variable", Pretendard, sans-serif; color:#303030; font-size: 1.2rem;}
.inner,.inner2 {padding: 0 20px;}

.c_default {color:#303030 !important}
.c_lightgray {color:#c8c1b8 !important}
.c_gray {color:#808080 !important}
.c_red {color:#c70000 !important}
.c_white {color:#fff !important}
.color1 {color: #47c3d4 !important;}
.color2 {color: #3e3a5f !important;}
.color3 {color: #a1d55d !important;}

h1,h2,h3 {font-weight:300;line-height:1.2}
h1 {font-size:3.2rem;}
.sizeh1 {font-size: 50px !important;}
h1.big {font-size: 3.8rem;}
h1.superbig {font-size: 5rem;}
h2 {font-size:2.6rem}
.sizeh2 {font-size: 40px !important;}
h3 {font-size:2rem; }
h4 {font-size:1.5rem; font-weight: 400; line-height: 1.4;}
.sizeh4 {font-size: 1.5rem;}
h5 {font-size:1.4rem; font-weight: 400; line-height:1.55; word-break:keep-all;}
p {font-size:1.25rem; line-height:1.6; color:inherit; word-break:keep-all; }
p.small {font-size:1.1rem; letter-spacing: 0;}


.kjcgothic {font-family: 'KimjungchulGothic-Regular';}
.kjcgothic_light {font-family: 'KimjungchulGothic-Light';}
.kjcgothic_bold {font-family: 'KimjungchulGothic-Bold';}
.pretendard {font-family: "Pretendard Variable", Pretendard, sans-serif;;}
.loose {letter-spacing: 0.4em;}
.loose2 {letter-spacing: 0.01em;}
b {letter-spacing: inherit; font-weight: 600;}
.bold {font-weight: 600;}



span {color:inherit;}

.float {float:left;}
.float_r {float:right}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center !important}
.clearfix::after {content:""; clear:both; display: block;}
.inlineblock {display: inline-block;}

.relative {position: relative;}


.flex {display: flex;}
.col1 {flex: 1;}
.col2 {flex: 2;}
.col3 {flex: 3;}
.col4 {flex: 4;}


.bd_b {border-bottom:1px #e0e0e0 solid}
.bd_t {border-top:1px #e0e0e0 solid}



/* 컬럼 설정 */
.w05 {width: 5%;}
.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w22 {width: 22%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w40 {width: 40%;}
.w50 {width: 50% !important;}
.w60 {width: 60%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w90 {width: 90%;}
.w100 {width: 100% !important;}





#wrap {width:640px; margin: 0px auto; background:#fff; position: relative;}

h1.logo {width:200px; height:53px; background:url(images/logo.png) center no-repeat; background-size: contain; text-indent:-3333px;}
h1.logo a {display:block; height:inherit; }
#footer h1.logo {width: 260px; height: 68px; background: url(images/logo.png) center no-repeat;}


/* 공통상단 */
#header {width:100%; height:130px; position: absolute; z-index: 10;}
#header > .inner {position: relative;}
#header > .inner > * {position:absolute; z-index: 1;}
#header .logo {top:40px;left:20px;}
#header .logo a {display:block;height:inherit;}

#header .topnav {font-size: 60px; text-align: center; right:20px; top: 35px;}

#header .subnav { 
  margin:auto;
  width:100%;
  height: 100vh;
  background:url(images/gnb_hover_bg.jpg) bottom right no-repeat #fff;
  color: #a0a0a0;
  display: none;
  position: fixed;
  z-index:1000;
  top:0;
  left: 0;
  font-size:20px;
  padding:3em 1em;
  text-align: justify;
}
#header .subnav ul {width:100%; margin:10px auto; display: inline-block;}
#header .subnav ul > li {float:left; margin-left:30px; line-height:2;}
#header .subnav ul > li:first-child {width: 100%; color: #47c3d4; margin-bottom: 10px;}
#header .subnav ul > li:first-child h3 {font-weight: bold;}
#header .subnav ul > li:first-child:hover {color: #000;}
#header .subnav ul > li .on {color: #000; font-weight: bold;}
#header .subnav a:hover {color: #3e3a5f; font-weight: bold;}
#header .subnav a {display:block;}

#header .subnav a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
#header .subnav a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #3e3a5f;
  height: 1px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#header .subnav a:hover:before, #header .subnav a:focus:before, #header .subnav a:active:before, #header .subnav a.on:before {
  left: 0;
  right: 0;
}

#header .subnav .closed {position: absolute; right: 20px; top: 35px; font-size: 60px; cursor: pointer;}
#header .subnav .closed:hover {color: #3e3a5f;}



/* 공통 하단 */
#footer { width:100%; display:inline-block; float:left; padding-bottom: 3em;}
#footer .sns {width: 100%; background-color: #3e3a5f; color: #fff; display: inline-block;  float:left; border-top: 1px rgba(255,255,255,0.2) solid; padding: 1em 0;}
#footer .sns li {width: 25%; float: left; border-left: 1px rgba(255,255,255,0.2) solid; text-align: center; padding: 0.5em 0;}
#footer .sns li * {line-height: 40px;}
#footer .sns li img {margin-right: 5px; width: 40px;}

#footer .inner {position: relative; width: 100%;}
#footer .tel img {width: 100%;}
#footer .logo {float: left; margin: 50px 0 0;}
#footer .txtbox {width: 100%; display: inline-block;}
#footer .txtbox span { margin-right: 20px; line-height: 1.6;}
#footer .txtbox a.btn {border-left: 1px #e0e0e0 solid; padding: 0 20px;}
#footer .txtbox a.btn.btn1 {border: 0; padding-left: 0;}








@media only screen and (max-width:640px) {
	body {font-size: 3.2vw;}

	h1 {font-size:8.5vw;}
	.sizeh1 {font-size: 8.5vw !important;}
  h1.big {font-size: 10vw  !important;}
  h1.superbig {font-size: 15vw  !important;}
	h2 {font-size:7vw;}
	.sizeh2 {font-size: 7vw !important;}
	h3 {font-size:5.5vw; }
	h4 {font-size:4.5vw;}
	.sizeh4 {font-size: 4.5vw;}
	h5 {font-size:3.7vw;}
	.sizeh5 {font-size: 3.7vw !important;}
	p {font-size:3.2vw; line-height:1.6; color:inherit; word-break:keep-all; }
	p.small {font-size:3vw; letter-spacing: 0;}

	.tight {letter-spacing:-0.05vw !important;}
	.loose {letter-spacing:1vw !important;}
  .loose2 {letter-spacing: 0.2vw !important;}


	#wrap {width:100%;}	   
  .inner,.inner2 {padding: 0 2vw;}


	h1.logo {}
	#header {height: 25vw;}
	#header .logo {top: 7vw; left: 4vw; width: 31.25vw; height: 8.28vw;}

	#header .topnav {font-size: 7.8vw; top: 7.5vw; right: 4vw;}
  
  #header .subnav {padding: 15vw 0; font-size:3.7vw; }
  #header .subnav ul {margin: 1.5vw auto;}
  #header .subnav ul > li {margin-left: 2.2vw; margin-right: 2.2vw;}
  #header .subnav ul > li:first-child {margin-bottom: 1vw !important;}

  #header .subnav .closed {position: absolute; right: 3.1vw; top: 7.5vw; font-size: 7.8vw; cursor: pointer;}


	#footer .sns {width: 100%; background-color: #3e3a5f; color: #fff; display: inline-block;  float:left; border-top: 1px rgba(255,255,255,0.2) solid; padding: 1em 0;}
  #footer .sns li {width: 25%; float: left; border-left: 1px rgba(255,255,255,0.2) solid; text-align: center; padding: 0.5em 0;}
  #footer .sns li * {line-height: 6.25vw;}
  #footer .sns li img {margin-right: 0.7vw; width: 6.25vw; }
	#footer .txtbox span {margin-right: 3vw;}
  #footer {padding-bottom:5vw;}
  #footer h1.logo {width: 40.625VW; height: 10.625VW; background: url(images/logo.png) center no-repeat; background-size: contain;}
  #footer .logo {margin: 7.8125vw 0 0;}
  
}