@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url(https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap);
.image-area {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}
.image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.image-r {
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.image-f {
	background-size: contain;
	background-repeat: no-repeat;
  background-position: center center;
}
.image-b { background-position: center bottom; }
.img20 { padding-top: 20%; }
.img30 { padding-top: 30%; }
.img35 { padding-top: 35%; }
.img40 { padding-top: 40%; }
.img45 { padding-top: 45%; }
.img50 { padding-top: 50%; }
.img55 { padding-top: 55%; }
.img56 { padding-top: 56.2%; }
.img60 { padding-top: 60%; }
.img66 { padding-top: 66%; }
.img70 { padding-top: 70%; }
.img80 { padding-top: 80%; }
.img100 { padding-top: 100%; }
.img140 { padding-top: 140%; }

.circle-wrap {
	border-radius: 1000px;
	overflow: hidden;
}
.circle-wrap-hover .circle-target1,
.circle-wrap-hover .circle-target2 {
	transition: .3s;
}
.circle-wrap-hover:hover .circle-target1 {
	transform: scale(0.905797101,0.905797101);
}
.circle-wrap-hover:hover .circle-target2 {
	transform: scale(1.104,1.104);
}
.bg-cover1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(1, 15, 226, 0.5);
}

.bg-cover-area {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.bg-cover-area-r {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.icon-img {
	width: 24px;
	height: 24px;
}
.icon-img-s {
	width: 18px;
	min-width: 18px;
	max-width: 18px;
	height: 18px;
	min-height: 18px;
	max-height: 18px;
}
.icon-img-l {
	width: 36px;
	min-width: 36px;
	max-width: 36px;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
}

.ftxxxl { font-size: 3.8em; }
.ftxxl { font-size: 3.2em; }
.ftxl { font-size: 2.8em; }
.ftl { font-size: 2.4em; }
.ft0 { font-size: 2em; }
.ft1 { font-size: 1.8em; }
.ft2 { font-size: 1.6em; }
.ft25 { font-size: 1.45em; }
.ft3 { font-size: 1.3em; }
.ft4 { font-size: 1.12em; }
.ft45 { font-size: .9em; }
.ft5 { font-size: .8em; }
.ft6 { font-size: .6em; }
.ft-th { font-weight: 100; }
.ft-el { font-weight: 200; }
.ft-lt { font-weight: 300; }
.ft-rg { font-weight: 400; }
.ft-md { font-weight: 500; }
.ft-b { font-weight: 600; }
.ft-eb { font-weight: 700; }
.ft-hv { font-weight: 800; }
.ft-bi { font-weight: 900; }

.lh-09 { line-height: .9; }
.lh-10 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-19 { line-height: 1.9; }
.lh-20 { line-height: 2; }
.lh-22 { line-height: 2.2; }
.lh-24 { line-height: 2.4; }

::selection {
  background: #e4002b;
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: #e4002b;
  color: #fff;
  text-shadow: none;
}
::-webkit-selection {
  background: #e4002b;
  color: #fff;
  text-shadow: none;
}
.ft-rd { color: #ff0000; }


.ft-lg { color: #c1c1c1; }
.ft-lg0 { color: #ddd; }
.ft-gr { color: #999; }
.ft-gr0 { color: #777; }
.ft-wh, .ft-wh-hover:hover, .hover-wrap:hover .ft-wh-hover, .selected .ft-wh-sel, .selected.ft-wh-sel { color: #fff; }
.ft-bk, .ft-bk-hover:hover, .hover-wrap:hover .ft-bk-hover, .selected .ft-bk-sel, .selected.ft-bk-sel { color: #000; }
.ft-c0, .ft-c0-hover:hover, .hover-wrap:hover .ft-c0-hover, .selected .ft-c0-sel, .selected.ft-c0-sel { color: #18015D; }
.ft-c1, .ft-c1-hover:hover, .hover-wrap:hover .ft-c1-hover, .selected .ft-c1-sel, .selected.ft-c1-sel { color: #130178; }
.ft-c2, .ft-c2-hover:hover, .hover-wrap:hover .ft-c2-hover, .selected .ft-c2-sel, .selected.ft-c2-sel { color: #003da5; }
.ft-c3, .ft-c3-hover:hover, .hover-wrap:hover .ft-c3-hover, .selected .ft-c3-sel, .selected.ft-c3-sel { color: #010FE2; }
.ft-c4, .ft-c4-hover:hover, .hover-wrap:hover .ft-c4-hover, .selected .ft-c4-sel, .selected.ft-c4-sel { color: #e4002b; }

.bg-clr-lg0 { background: #e5e7e8; }
.bg-clr-bk, .bg-clr-bk-hover:hover, .bg-hover-wrap:hover .bg-clr-bk-hover, .bg-clr-bk-bf::before, .bg-clr-bk-af::after, .bg-clr-bk-sel.selected, .bg-clr-wrap.selected .bg-clr-bk-sel { background-color: #000; }
.bg-clr-wh, .bg-clr-wh-hover:hover, .bg-hover-wrap:hover .bg-clr-wh-hover, .bg-clr-wh-bf::before, .bg-clr-wh-af::after, .bg-clr-wh-sel.selected, .bg-clr-wrap.selected .bg-clr-wh-sel { background-color: #fff; }
.bg-clr-lg, .bg-clr-lg-hover:hover, .bg-clr-lg-bf::before, .bg-clr-lg-af::after, .bg-clr-lg-sel.selected, .bg-clr-wrap.selected .bg-clr-lg-sel  { background-color: #f0f1f1; }
.bg-clr-lg0, .bg-clr-lg0-hover:hover, .bg-clr-lg0-bf::before, .bg-clr-lg0-af::after, .bg-clr-lg0-sel.selected, .bg-clr-wrap.selected .bg-clr-lg0-sel  { background-color: #e5e7e8; }
.bg-clr-gr, .bg-clr-gr-hover:hover, .bg-clr-gr-bf::before, .bg-clr-gr-af::after, .bg-clr-gr-sel.selected, .bg-clr-wrap.selected .bg-clr-gr-sel  { background-color: rgb(159, 164, 169); }
.bg-clr-gr0, .bg-clr-gr0-hover:hover, .bg-clr-gr0-bf::before, .bg-clr-gr0-af::after, .bg-clr-gr0-sel.selected, .bg-clr-wrap.selected .bg-clr-gr0-sel  { background-color: #bec4c5; }
.bg-clr-0, .bg-clr-0-hover:hover, .bg-clr-0-bf::before, .bg-clr-0-af::after  { background-color: #18015D; }
.bg-clr-1, .bg-clr-1-hover:hover, .bg-clr-1-bf::before, .bg-clr-1-af::after  { background-color: #130178; }
.bg-clr-2, .bg-clr-2-hover:hover, .bg-clr-2-bf::before, .bg-clr-2-af::after { background-color: #003da5; }
.bg-clr-3, .bg-clr-3-hover:hover, .bg-clr-3-bf::before, .bg-clr-3-af::after  { background-color: #010FE2; }
.bg-clr-4, .bg-clr-4-hover:hover, .bg-clr-4-bf::before, .bg-clr-4-af::after  { background-color: #e4002b; }

.svg-rd svg, .svg-rd { stroke: #ff0000; }
.svg-c0 svg, .svg-c0 { stroke: #18015D; }
.svg-c1 svg, .svg-c1 { stroke: #130178; }
.svg-c2 svg, .svg-c2 { stroke: #003da5; }
.svg-c3 svg, .svg-c3 { stroke: #010FE2; }
.svg-c4 svg, .svg-c4 { stroke: #e4002b; }
.svg-wh-f svg, .svg-wh-f, .hover-wrap:hover .svg-wh-fhover, .svg-wh-fhover:hover { fill: #fff; }
.svg-c0-f svg, .svg-c0-f, .hover-wrap:hover .svg-c0-fhover, .svg-c0-fhover:hover { fill: #18015D; }
.svg-c1-f svg, .svg-c1-f, .hover-wrap:hover .svg-c1-fhover, .svg-c1-fhover:hover { fill: #130178; }
.svg-c2-f svg, .svg-c2-f, .hover-wrap:hover .svg-c2-fhover, .svg-c2-fhover:hover { fill: #003da5; }
.svg-c3-f svg, .svg-c3-f, .hover-wrap:hover .svg-c3-fhover, .svg-c3-fhover:hover { fill: #010FE2; }
.svg-c4-f svg, .svg-c4-f, .hover-wrap:hover .svg-c4-fhover, .svg-c4-fhover:hover { fill: #e4002b; }

.hover-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, .2);
  pointer-events: none;
  transition: .6s;
}
.hover-cover.hc-wh::after { background-color: rgba(255, 255, 255, .2); }
.hover-cover:hover::after {
  opacity: 1;
}
/* .hover-type,
.hover-type svg,
.hover-type .hover-with,
.hover-self {
	transition: .3s;
}
.hover-type:hover svg {
	fill: #0DFF9E;
}
.hover-type:hover .hover-with,
.hover-self:hover {
	color: #0DFF9E;
} */

.bd-bk { border: 1px solid #000; }
.bd-bk2 { border: 2px solid #000; }
.bd-tp-bk2 { border-top: 1px solid #000; }
.bd-wh { border: 1px solid #fff; }
.bd-wh3 { border: 1px solid rgba(255,255,255,.3); }
.bd-dg { border: 1px solid #999; }
.bd-dg3 { border: 3px solid #999; }
.bd-gr { border: 1px solid #ddd; }
.bd-tp-gr { border-top: 1px solid #ddd; }
.bd-tp-gr2 { border-top: 2px solid #ddd; }
.bd-bt-gr { border-bottom: 1px solid #ddd; }
.bd-rd-5 { border-radius: 5px; }
.bd-rd-10 { border-radius: 10px; }
.bd-rd-100 { border-radius: 100px; }
.bd-rd-500 { border-radius: 500px; }

.txt-right { text-align: right; }
.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-underline { text-decoration: underline; }
.txt-wrap { word-break: break-all; word-wrap: normal; }
.txt-keep { word-break: keep-all; }
.txt-justify { text-align: justify; text-justify: auto; }
.txt-nowrap { white-space: nowrap; }
.v-mid { vertical-align: middle }

.mx1400 { max-width: 1400px; }
.mx1200 { max-width: 1200px; }
.mx1280 { max-width: 1280px; }
.mx1000 { max-width: 1000px; }
.mx120 { max-width: 120px; }
.mx170 { max-width: 170px; }
.mx200 { max-width: 200px; }
.mx250 { max-width: 250px; }
.mx300 { max-width: 300px; }
.mx400 { max-width: 400px; }
.mx450 { max-width: 450px; }
.mx540 { max-width: 540px; }
.mx600 { max-width: 600px; }
.mx700 { max-width: 700px; }
.mx800 { max-width: 800px; }
.min120 { min-width: 120px; }
.min170 { min-width: 170px; }
.min200 { min-width: 200px; }
.min400 { min-width: 400px; }
.min600 { min-width: 600px; }
.minh400 { min-height: 400px; }
.minh500 { min-height: 500px; }
.minh600 { min-height: 600px; }

.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w33 { width: 33.333%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w100 { width: 100%; }
.w50p { width: 50px; min-width: 50px; }
.w55p { width: 55px; min-width: 55px; }
.w110p { width: 110px; min-width: 110px; }
.w110p { width: 110px; min-width: 110px; }
.w150p { width: 150px; min-width: 150px; }
.w200p { width: 200px; min-width: 200px; }
.h100 { height: 100%; }
.h200p { height: 200px; }
.h300p { height: 300px; }
.h400p { height: 400px; }
.h600p { height: 600px; }

.pd-tmenu { padding-top: 71px; }
.mg-tmenu { margin-top: 71px; }

.mg-at { margin: auto; }
.mg-ct { margin-left: auto; margin-right: auto; }
.mg-la { margin-left: auto; }
.mg-ra { margin-right: auto; }
.mg-s0 { margin-left: 0; margin-right: 0; }
.mg-5 { margin: 5px; }
.mg-h5 { margin-top: 5px; margin-bottom: 5px; }
.mg-t5 { margin-top: 5px; }
.mg-b5 { margin-bottom: 5px; }
.mg-s5 { margin-left: 5px; margin-right: 5px; }
.mg-l5 { margin-left: 5px; }
.mg-r5 { margin-right: 5px; }
.mg-15 { margin: 15px; }
.mg-h15 { margin-top: 15px; margin-bottom: 15px; }
.mg-t15 { margin-top: 15px; }
.mg-b15 { margin-bottom: 15px; }
.mg-s15 { margin-left: 15px; margin-right: 15px; }
.mg-l15 { margin-left: 15px; }
.mg-r15 { margin-right: 15px; }
.mg-10 { margin: 10px; }
.mg-h10 { margin-top: 10px; margin-bottom: 10px; }
.mg-t10 { margin-top: 10px; }
.mg-b10 { margin-bottom: 10px; }
.mg-s10 { margin-left: 10px; margin-right: 10px; }
.mg-l10 { margin-left: 10px; }
.mg-r10 { margin-right: 10px; }
.mg-20 { margin: 20px; }
.mg-h20 { margin-top: 20px; margin-bottom: 20px; }
.mg-t20 { margin-top: 20px; }
.mg-b20 { margin-bottom: 20px; }
.mg-s20 { margin-left: 20px; margin-right: 20px; }
.mg-l20 { margin-left: 20px; }
.mg-r20 { margin-right: 20px; }
.mg-30 { margin: 30px; }
.mg-h30 { margin-top: 30px; margin-bottom: 30px; }
.mg-t30 { margin-top: 30px; }
.mg-b30 { margin-bottom: 30px; }
.mg-s30 { margin-left: 30px; margin-right: 30px; }
.mg-l30 { margin-left: 30px; }
.mg-r30 { margin-right: 30px; }
.mg-40 { margin: 40px; }
.mg-h40 { margin-top: 40px; margin-bottom: 40px; }
.mg-t40 { margin-top: 40px; }
.mg-b40 { margin-bottom: 40px; }
.mg-s40 { margin-left: 40px; margin-right: 40px; }
.mg-l40 { margin-left: 40px; }
.mg-r40 { margin-right: 40px; }
.mg-60 { margin: 60px; }
.mg-h60 { margin-top: 60px; margin-bottom: 60px; }
.mg-t60 { margin-top: 60px; }
.mg-b60 { margin-bottom: 60px; }
.mg-s60 { margin-left: 60px; margin-right: 60px; }
.mg-l60 { margin-left: 60px; }
.mg-r60 { margin-right: 60px; }
.mg-80 { margin: 80px; }
.mg-h80 { margin-top: 80px; margin-bottom: 80px; }
.mg-t80 { margin-top: 80px; }
.mg-b80 { margin-bottom: 80px; }
.mg-s80 { margin-left: 80px; margin-right: 80px; }
.mg-l80 { margin-left: 80px; }
.mg-r80 { margin-right: 80px; }
.mg-100 { margin: 100px; }
.mg-h100 { margin-top: 100px; margin-bottom: 100px; }
.mg-t100 { margin-top: 100px; }
.mg-b100 { margin-bottom: 100px; }
.mg-s100 { margin-left: 100px; margin-right: 100px; }
.mg-l100 { margin-left: 100px; }
.mg-r100 { margin-right: 100px; }

.pd-2 { padding: 2px; }
.pd-s2 { padding-left: 2px; padding-right: 2px; }
.pd-l2 { padding-left: 2px; }
.pd-r2 { padding-right: 2px; }
.pd-h2 { padding-top: 2px; padding-bottom: 2px; }
.pd-t2 { padding-top: 2px; }
.pd-b2 { padding-bottom: 2px; }
.pd-5 { padding: 5px; }
.pd-s5 { padding-left: 5px; padding-right: 5px; }
.pd-l5 { padding-left: 5px; }
.pd-r5 { padding-right: 5px; }
.pd-h5 { padding-top: 5px; padding-bottom: 5px; }
.pd-t5 { padding-top: 5px; }
.pd-b5 { padding-bottom: 5px; }
.pd-10 { padding: 10px; }
.pd-s10 { padding-left: 10px; padding-right: 10px; }
.pd-l10 { padding-left: 10px; }
.pd-r10 { padding-right: 10px; }
.pd-h10 { padding-top: 10px; padding-bottom: 10px; }
.pd-t10 { padding-top: 10px; }
.pd-b10 { padding-bottom: 10px; }
.pd-15 { padding: 15px; }
.pd-s15 { padding-left: 15px; padding-right: 15px; }
.pd-l15 { padding-left: 15px; }
.pd-r15 { padding-right: 15px; }
.pd-h15 { padding-top: 15px; padding-bottom: 15px; }
.pd-t15 { padding-top: 15px; }
.pd-b15 { padding-bottom: 15px; }
.pd-20 { padding: 20px; }
.pd-s20 { padding-left: 20px; padding-right: 20px; }
.pd-l20 { padding-left: 20px; }
.pd-r20 { padding-right: 20px; }
.pd-h20 { padding-top: 20px; padding-bottom: 20px; }
.pd-t20 { padding-top: 20px; }
.pd-b20 { padding-bottom: 20px; }
.pd-25 { padding: 25px; }
.pd-s25 { padding-left: 25px; padding-right: 25px; }
.pd-l25 { padding-left: 25px; }
.pd-r25 { padding-right: 25px; }
.pd-h25 { padding-top: 25px; padding-bottom: 25px; }
.pd-t25 { padding-top: 25px; }
.pd-b25 { padding-bottom: 25px; }
.pd-30 { padding: 30px; }
.pd-s30 { padding-left: 30px; padding-right: 30px; }
.pd-l30 { padding-left: 30px; }
.pd-r30 { padding-right: 30px; }
.pd-h30 { padding-top: 30px; padding-bottom: 30px; }
.pd-t30 { padding-top: 30px; }
.pd-b30 { padding-bottom: 30px; }
.pd-40 { padding: 40px; }
.pd-s40 { padding-left: 40px; padding-right: 40px; }
.pd-l40 { padding-left: 40px; }
.pd-r40 { padding-right: 40px; }
.pd-h40 { padding-top: 40px; padding-bottom: 40px; }
.pd-t40 { padding-top: 40px; }
.pd-b40 { padding-bottom: 40px; }
.pd-60 { padding: 60px; }
.pd-s60 { padding-left: 60px; padding-right: 60px; }
.pd-l60 { padding-left: 60px; }
.pd-r60 { padding-right: 60px; }
.pd-h60 { padding-top: 60px; padding-bottom: 60px; }
.pd-t60 { padding-top: 60px; }
.pd-b60 { padding-bottom: 60px; }
.pd-80 { padding: 80px; }
.pd-s80 { padding-left: 80px; padding-right: 80px; }
.pd-l80 { padding-left: 80px; }
.pd-r80 { padding-right: 80px; }
.pd-h80 { padding-top: 80px; padding-bottom: 80px; }
.pd-t80 { padding-top: 80px; }
.pd-b80 { padding-bottom: 80px; }
.pd-100 { padding: 100px; }
.pd-s100 { padding-left: 100px; padding-right: 100px; }
.pd-l100 { padding-left: 100px; }
.pd-r100 { padding-right: 100px; }
.pd-h100 { padding-top: 100px; padding-bottom: 100px; }
.pd-t100 { padding-top: 100px; }
.pd-b100 { padding-bottom: 100px; }



.inst-box {
	z-index: 1;
	position: relative;
}
.block-box {
	display: block;
}
.iblock-box {
	display: inline-block;
	position: relative;
}
.zIdx1 { z-index: 1; }
.zIdx2 { z-index: 2; }
.oflow-h { overflow: hidden; }

.box-shadow-type0 { box-shadow: 4px 4px 0px 0px rgba(0,0,0,.1); }
.box-shadow-type1 { box-shadow: 0 0 40px 10px rgba(0,0,0,.1); }
.underline-title { position: relative; }
.underline-title::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 4px;
	background-color: #18015D;
}
.opacity-2 { opacity: .2; }

.cross-btn {
	display: inline-block;
	position: relative;
	width: 24px;
	height: 24px;
	border: 1px solid #000;
	border-radius: 100px;
	background-image: url('/dist/img/icon/plus.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.cross-btn.clr-dg {
	background-image: url('/dist/img/icon/plus_dg.svg');
}
.cross-btn.type2 {
	border: none;
	border-radius: 0;
}
.cross-btn.type3 {
	border: none;
	border-radius: 0;
	transform: rotate(45deg);
}

.cross-btn-hover .cross-btn {
	transition: transform .3s;
}
.cross-btn-hover:hover .cross-btn {
	transform: rotate(180deg);
}

.cursor-point { cursor: pointer }
.w12-g5 { width: calc( 12.5% - 10px ); }
.w12-g10 { width: calc( 12.5% - 20px ); }
.w12-g20 { width: calc( 12.5% - 40px ); }
.w16-g5 { width: calc( 16.66667% - 10px ); }
.w16-g10 { width: calc( 16.66667% - 20px ); }
.w16-g20 { width: calc( 16.66667% - 40px ); }
.w20-g5 { width: calc( 20% - 10px ); }
.w20-g10 { width: calc( 20% - 20px ); }
.w20-g20 { width: calc( 20% - 40px ); }
.w33-g5 { width: calc( 33.3333% - 10px ); }
.w33-g10 { width: calc( 33.3333% - 20px ); }
.w33-g20 { width: calc( 33.3333% - 40px ); }
.w50-g5 { width: calc( 50% - 10px ); }
.w50-g10 { width: calc( 50% - 20px ); }
.w50-g30 { width: calc( 50% - 60px ); }
.w50-g40 { width: calc( 50% - 80px ); }
.w25-g5 { width: calc( 25% - 10px ); }
.w25-g10 { width: calc( 25% - 20px ); }
.w25-g20 { width: calc( 25% - 40px ); }
.w25-g30 { width: calc( 25% - 60px ); }
.w25-g40 { width: calc( 25% - 80px ); }
.w33-g10 { width: calc( 33.3333% - 20px ); }
.w33-g20 { width: calc( 33.3333% - 40px ); }
.w33-g30 { width: calc( 33.3333% - 60px ); }
.w33-g40 { width: calc( 33.3333% - 80px ); }
.w50-g10 { width: calc( 50% - 20px ); }
.w50-g20 { width: calc( 50% - 40px ); }
.grid-5 { width: calc(100% + 10px); margin-left: -5px; }
.grid-10 { width: calc(100% + 20px); margin-left: -10px; }
.grid-20 { width: calc(100% + 40px); margin-left: -20px; }
.grid-30 { width: calc(100% + 60px); margin-left: -30px; }
.grid-40 { width: calc(100% + 80px); margin-left: -40px; }

.col-2 { column-count: 2; }
.col-g2 { column-gap: 2em; }
.col-g4 { column-gap: 4em; }

.float-l { float: left; }
.flx-odr-0 { order: 0; }
.flx-odr-1 { order: 1; }
.flx-odr-2 { order: 2; }
.flx-0 {
	display: flex;
}
.flx-0c {
	display: flex;
	justify-content: center;
}
.flx-col {
	display: flex;
	flex-direction: column;
}
.flx-col-w {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.flx-col-cc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.flx-col-cl {
	display: flex;
	flex-direction: column;
  align-items: flex-start;
	justify-content: center;
}
.flx-col-btw {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flx-cl {
	display: flex;
	align-items: center;
}
.flx-cc {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flx-icc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.flx-cr {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.flx-sr {
	display: flex;
	justify-content: flex-end;
}
.flx-end {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.flx-el {
	display: flex;
	align-items: flex-end;
}
.flx-sb {
	display: flex;
	justify-content: space-between;
}
.flx-sbc {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flx-cs {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flx-w {
	display: flex;
	flex-wrap: wrap;
}
.flx-itm-r { flex: 1; flex-basis: auto; }
.flx-itm-r10 { flex: 1 0 auto; }
.flx-itm-r0 { flex: 1; flex-basis: 0; }
.flx-itm-r1 { flex: 1; flex-basis: 1; }
.flx-itm-end {
	justify-content: flex-end;
}
.display-hidden { display: none; }

.quote-style::before,
.quote-style::after {
	content: '';
	display: inline-block;
	align-self: flex-start;
	position: relative;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.quote-style::before { background-image: url('/dist/img/icon/quote-top1.svg'); }
.quote-style::after { background-image: url('/dist/img/icon/quote-bottom1.svg'); }
.quote-style.quote-s::before, .quote-style.quote-s::after { min-width: 24px; min-height: 24px; }
.quote-style.quote-m::before, .quote-style.quote-m::after { min-width: 36px; min-height: 36px; }
.quote-style.quote-l::before, .quote-style.quote-l::after { min-width: 48px; min-height: 48px; }

.centerline-after { display: flex; align-items: center; }
.centerline-after::after {
	content: '';
	position: relative;
	flex: 1 0 auto;
	height: 1px;
	background-color: #ccc;
}
.leftline-h { display: flex; }
.leftline-h::before {
	content: '';
	position: relative;
	width: 5px;
	margin-top: .15em;
	margin-bottom: .15em;
}
.leftline-v { display: flex; align-items: center; }
.leftline-v::before {
	content: '';
	position: relative;
	width: 20px;
	height: 2px;
}
.leftline-vt { display: flex; }
.leftline-vt::before {
	content: '';
	position: relative;
	width: 20px;
	height: 2px;
	margin-top: .15em;
	margin-bottom: .15em;
}
.leftline-vb { display: flex; align-items: flex-end;}
.leftline-vb::before {
	content: '';
	position: relative;
	width: 20px;
	height: 2px;
	margin-top: .15em;
	margin-bottom: .15em;
}

.mark-img {
	background-size: auto 1em;
	background-position: left .25em;
	background-repeat: no-repeat;
}
.mark-img-s {
	background-size: 16px 16px;
	background-position: left .25em;
	background-repeat: no-repeat;
}
.mark-img-m {
	background-size: 24px 24px;
	background-position: left .25em;
	background-repeat: no-repeat;
}
.mark-img-l {
	background-size: 32px 32px;
	background-position: left .25em;
	background-repeat: no-repeat;
}
.mark-img-f {
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
}
.mark-each {
	position: relative;
	padding-left: 20px;
}
.mark-each::before {
	content: '';
	position: absolute;
	top: .44em;
	left: .4em;
	width: 6px;
	height: 6px;
	/*border-radius: 10px;*/
}
.mark-each.me-lh16::before { top: .58em; }
.mark-each.me-lh18::before { top: .7em; }

.image-slide {
	opacity: 0;
	visibility: hidden;
}
.image-slide.type1 {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-slide.type2 {
	display: none;
	position: relative;
}
.image-slide.selected {
	/* animation-name: imgSlideFadeIn;
	animation-duration: 7s;
	animation-delay: .1s;
	animation-fill-mode: forwards; */

	animation: imgSlideFadeIn 5s .1s forwards;
}
.image-slide.off {
	/* animation-name: imgSlideFadeOut;
	animation-duration: 7s;
	animation-delay: 0s;
	animation-fill-mode: forwards; */

	animation: imgSlideFadeOut 5s forwards;
}
.image-slide.type1.selected {
	display: flex;
}
.image-slide.type2.selected {
	display: block;
}

@keyframes imgSlideFadeIn {
	0% {
		visibility: hidden;
		opacity: 0;
	}	
	20% {
		visibility: visible;
		opacity: 1;
	}
	100% {
		visibility: visible;
		opacity: 1;
	}
}
@keyframes imgSlideFadeOut {
	0% {
		visibility: visible;
		opacity: 1;
	}
	20% {
		visibility: hidden;
		opacity: 0;
	}
	100% {
		visibility: hidden;
		opacity: 0;
	}
}
.delay1 {
	animation-delay: .6s;
}
.delay2 {
	animation-delay: .9s;
}
.delay3 {
	animation-delay: 1.2s;
}
.slide-arrow-area {
	z-index: 3;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0;
	padding: 0px 20px 0;
	transform: translateX(-50%);
}
.slide-arrow {
	width: 54px;
	height: 54px;
	cursor: pointer;
	background-size: 80% 80%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(255,255,255,.4);
	border-radius: 100px;
	transform: translateY(-50%);
}
.slide-arrow.arrow-small {
	width: 34px;
	height: 34px;
}
.slide-arrow.prev {
	background-image: url('/dist/img/icon/left-arrow.svg');
}
.slide-arrow.next {
	background-image: url('/dist/img/icon/right-arrow.svg');
}
.bullets {
	z-index: 1;
	position: relative;
	text-align: center;
}
.bullets li {
	display: inline-block;
	cursor: pointer;
}

.bullets.type1 {
	padding: 20px 0;
}
.bullets.type1 li {
	width: 40px;
	height: 4px;
	margin: 4px;
	background-color: #eee;
}
.bullets.type2 {
	padding: 10px 40px;
}
.bullets.type2.pos-bt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
}
.bullets.type2 li {
	width: 6px;
	height: 6px;
	margin: 4px;
	border-radius: 10px;
	background-color: #ddd;
}
.bullets.type1 li.selected,
.bullets.type2 li.selected {
	background-color: #000;
}

.button {
	position: relative;
	overflow: hidden;
}
.button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
/*	background-color: #18015D;*/
	transform-origin: 0 50%;
	transform: scale(0, 1);
	transition: transform .3s;
}
.button:hover::before {
	transform: scale(1, 1);
}
.action-btn {
	z-index: 1;
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
	padding: 5px;
	cursor: pointer;
	border-radius: 30px;
	background-color: rgba(255,255,255,.4);
}
.action-btn.act-btn-lg { background-color: rgba(221,221,221,.4); }
.action-btn.nobg {
	background: none;
}
.action-btn.act-btn-right {
	/*width: 34px;
	height: 34px;*/
	padding: 2px;
	transform: scale(.7,.7) rotate(-90deg);
}
.action-btn .line {
	position: relative;
	width: 100%;
	height: 100%;
}
.action-btn .line svg {
	fill: none;
	stroke: #F2845C;
	stroke-linecap: round;
	stroke-dasharray: 189% 40%;
	transition-property: stroke-dasharray;
	transition-duration: .6s;
	transition-delay: 0s;
}
.action-btn-hover {
	cursor: pointer;
}
.action-btn-hover:hover .action-btn .line svg,
.action-btn:hover .line svg {
	stroke-dasharray: 209% 0%;
	transition-delay: .2s;
}
.action-btn .stick {
	position: absolute;
	bottom: 31%;
	left: 50%;
	width: 2px;
	height: 44%;
	margin-left: -1px;
	border-radius: 100px;
	transform-origin: 50% 100%;
	transition-property: transform;
	transition-duration: .4s;
	transition-delay: .3s;
}
.action-btn-hover:hover .action-btn .stick,
.action-btn:hover .stick {
	transform: scale3d(1,0,0);
	transition-delay: 0s;
}
.action-btn .fig {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -12px;
	margin-top: -8px;
	width: 24px;
	height: 24px;
	/*border: 4px solid transparent;
	border-top: 4px solid #F2845C;*/
	/*background-image: url('/dist/img/icon/fig.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;*/
}
.action-btn .fig svg {
	position: relative;
	width: 100%;
	stroke-width: 2;
	fill: none;
}


#top-scroll-btn {
	position: fixed;
	bottom: 10%;
	right: 10%;
	opacity: 0;
	visibility: hidden;
	transform: rotate(-180deg) scale3d(0,0,1);
	transition: .6s;
}
#top-scroll-btn.show {
	opacity: 1;
	visibility: visible;
	transform: rotate(180deg) scale3d(1,1,1);
}


.tr-3 { transition: .3s; }
.tr-trigger {}
.tr-rise-target {
	opacity: 0;
	transform: translateY(10px);
	transition-property: opacity, transform;
	transition-duration: .3s;
}
.tr-trigger.on .tr-rise-target {
	opacity: 1;
	transform: translateY(0);
}

.tr-zoom-target {
	opacity: 0;
	transform: scale3d(.3, .3, 1);
	transition-property: opacity, transform;
	transition-duration: .3s;
}
.tr-trigger.on .tr-zoom-target {
	opacity: 1;
	transform: scale3d(1, 1, 1);
}

.tr-delay1 { transition-delay: .1s; }
.tr-delay2 { transition-delay: .2s; }
.tr-delay3 { transition-delay: .3s; }
.tr-delay4 { transition-delay: .4s; }
.tr-delay5 { transition-delay: .5s; }
.tr-delay6 { transition-delay: .6s; }
.tr-delay7 { transition-delay: .7s; }
.tr-delay8 { transition-delay: .8s; }
.tr-delay9 { transition-delay: .9s; }
.tr-delay10 { transition-delay: 1s; }
.tr-delay11 { transition-delay: 1.1s; }
.tr-delay12 { transition-delay: 1.2s; }
.tr-delay13 { transition-delay: 1.3s; }
.tr-delay14 { transition-delay: 1.4s; }
.tr-delay15 { transition-delay: 1.5s; }
.tr-delay16 { transition-delay: 1.6s; }
.tr-delay17 { transition-delay: 1.7s; }
.tr-delay18 { transition-delay: 1.8s; }
.tr-delay19 { transition-delay: 1.9s; }

.tr-trigger.off .tr-delay1,
.tr-trigger.off .tr-delay2,
.tr-trigger.off .tr-delay3,
.tr-trigger.off .tr-delay4,
.tr-trigger.off .tr-delay5,
.tr-trigger.off .tr-delay6,
.tr-trigger.off .tr-delay7,
.tr-trigger.off .tr-delay8,
.tr-trigger.off .tr-delay9,
.tr-trigger.off .tr-delay10,
.tr-trigger.off .tr-delay11,
.tr-trigger.off .tr-delay12,
.tr-trigger.off .tr-delay13,
.tr-trigger.off .tr-delay14,
.tr-trigger.off .tr-delay15,
.tr-trigger.off .tr-delay16,
.tr-trigger.off .tr-delay17,
.tr-trigger.off .tr-delay18,
.tr-trigger.off .tr-delay19 { transition-delay: 0s; }
@font-face { font-family: 'NEXEN_TIRE'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Regular.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'NEXEN_TIRE'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Bold.woff') format('woff'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'KCC-eunyoung'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
/*@font-face { font-family: 'Glyphter'; src: url('/Glyphter.woff') format('woff'); font-weight: normal; font-style: normal; }*/

.ft-fd { font-family: NanumSquare; }
.ft-f1 { font-family: 'NEXEN_TIRE'; }
.ft-f2 { font-family: 'KCC-eunyoung'; }
html:lang(ja) .ft-f0-ja { font-family: sans-serif; }
html:lang(ja) .ft-b-ja { font-weight: 900; }

.ft-mi { 
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga'; 
}
.ft-mio { 
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga'; 
}
.ft-mit { 
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga'; 
}


.bg-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg-cover.bg-c1::before { background-color: rgba(101,101,101, 0.2); }
.bg-cover.bg-c2::before { background-color: rgba(0,0,0, 0.4); }
.bg-cover.bg-wh::before { background-color: rgba(255,255,255, 0.7); }
.bg-cover.bg-wh1::before { background-color: rgba(255,255,255, 0.4); }
.bg-filter-bk { background-color: rgba(0, 0, 0, 0.4); }

.bg-clr-0-op9 { background-color: rgba(24, 1, 93, .9); }


* {
	box-sizing: border-box;
	/*word-break: break-all;*/
	/*word-break: keep-all;*/
}
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;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
ul {
	list-style: none;
}
a {
	color: inherit;
	text-decoration: none;
}
html {
	font-family: NanumSquare, sans-serif;
	font-weight: 400;
	line-height: 1.4;
	height: 100%;
}
html:lang(ja) { 
	/*font-family: Nanum Gothic;*/
	font-family: sans-serif;
}
body {
	font-size: 14px;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
	/*overflow-x: hidden;*/
}
body.hidden {
	overflow-y: hidden;
}
input,textarea,select {
	padding: 3.5px 5px;
	border: none;
	outline: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #ccc;
}
input::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
	color: #ccc;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder { /* Edge */
	color: #ccc;
}
input:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 18- */
	color: #ccc;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+ */
	color: #ccc;
}
.jhc-loading-area {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40px;
	text-align: center;
}
.jhc-loading-svg {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-image: url('/dist/img/loading/hexa.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/*animation: loading-svg-spin 1s infinite linear;*/
}
@media all and (-ms-high-contrast:none) {
 .jhc-loading-svg { background-image: url('/dist/img/loading/loading.svg'); animation: loading-svg-spin 1s infinite linear; } /* IE10 */
 *::-ms-backdrop, .jhc-loading-svg { background-image: url('/dist/img/loading/loading.svg'); animation: loading-svg-spin 1s infinite linear; } /* IE11 */
}
@keyframes loading-svg-spin {
	100% {
		transform: rotate(360deg);
	}
}


#loadingSVGarea {
	text-align: center;
	/* margin: 20px 0; */
}
.loadCircle {
	fill: none;
	stroke: #808080;
}
#page {
	color: #000;
	text-align: center;
	margin: 30px 0;
}
#leftsub, #rightsub {
	display: inline-block;
	margin:0;
	padding:0;
	vertical-align: middle;
}
#leftsub div, #rightsub div {
	display: inline-block;
	margin: 0 1px;
	vertical-align: middle;
}
#leftsub .page-arrow, #rightsub .page-arrow {
	width: 14px;
	height: 18px;
	vertical-align: middle;
}
.arrowpoly {
	fill: none;
	stroke: #9CA4A6;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#page .now {
	font-weight: 900;
}
#prev, #next {
	margin: 0;
	padding: 0;
}
#page .end {
	font-size: 15px;
}
#page-area {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	overflow: hidden;
}
#page-part {
	display: inline-block;
	position: relative;
	text-align: left;
	white-space: nowrap;
}
.page-block {
	display: inline-block;
	position: relative;
}
.page-block span {
	padding: 0 5px;
}
.page-block span.selected {
	font-weight: bold;
	color: blue;
	font-size: 15px;
}
#prev, #next, #leftsub div, 
#rightsub div, .page-block span {
	cursor: pointer;
}
#page-404-container {
	position: relative;
	width: 100%;
	height: 100vh;
}
#page-404-container .page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#page-404-container .page .status {
	font-size: 40vw;
	font-weight: 600;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: .1;
	transform: translate(-50%, -50%);
}
#page-404-container .page .title {
	font-size: 4vw;
	font-weight: 900;
	position: relative;
	max-width: 600px;
	text-align: center;
}
#page-404-container .page .btn {
	display: block;
	color: #fff;
	position: relative;
	margin-top: 20px;
	padding: 20px 40px;
	background-color: #d62323;
}

#head-area {
	z-index: 101;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/*box-shadow: 0 0 40px 10px rgba(0,0,0,.1);*/
	box-shadow: 0px 4px 0px 0px rgba(0,0,0,.1);
	background-color: #fff;
}
#head-area .head-part {
	transition: opacity 1.8s;
}
#head-area.on .head-part {
	opacity: 1;
}
#head-area .top-area {
	display: flex;
  justify-content: space-between;
	position: relative;
	width: 100%;
}
#head-area .logo-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
#index-list li {
	width: 8px;
	height: 8px;
	margin: 0 2%;
	cursor: pointer;
	border-radius: 20px;
	background-color: #fff;
	opacity: .5;
}
#index-list li.selected {
	opacity: 1;
}

#logo-area-top {
	width: 160px;
}
.logo {
	width: 100%;
	padding-top: 28%;
	background-image: url('/dist/img/logo/logo.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.logo.wh {
	background-image: url('/dist/img/logo/logo-wh.svg');
}
.logo.bk {
	background-image: url('/dist/img/logo/logo-bk.svg');
}

#menu-cont-area {
	z-index: 5;
	position: relative;
}
#menu-cont {
	display: inline-block;
	position: relative;
	padding: 0 20px;
}
/*#menu-cont::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
}*/
#menu-cont .menu-item {
	display: inline-block;
	position: relative;
	cursor: pointer;
	background: #fff; 
}
#menu-cont .menu-item .item {
	z-index: 1;
	display: inline-block;
	position: relative;
	padding: 26px 15px;
	background: #fff;
	transition: color .2s;
}
/* #menu-cont .menu-item:hover .item,
#menu-cont .menu-item.selected .item {
	color: #0CE8CE;
} */
#menu-cont .sub-menu-list {
	position: absolute;
	bottom: 0px;
	left: 0;
	min-width: 200px;
	visibility: hidden;
	border-top: 4px solid #333;
	/*pointer-events: none;*/
	opacity: 0;
	transform: translate(-10px, 100%);
	transition: .3s .2s;
}
#menu-cont .menu-item:hover .sub-menu-list {
	visibility: visible;
	/*pointer-events: auto;*/
	opacity: 1;
	transform: translate(0%, 100%);
}
#menu-cont .menu-item:hover .sub-menu-list {
	z-index: 1;
}
#menu-cont .sub-menu-list .sub-menu-item {
	border-bottom: 3px solid #eee;
	opacity: 0;
	transition: .3s;
}
#menu-cont .sub-menu-list .sub-menu-item:hover,
#menu-cont .sub-menu-list .sub-menu-item.selected {
	color: #fff;
	background-color: #232250;
}
#menu-cont .menu-item:hover .sub-menu-item,
#menu-cont .menu-item.selected .sub-menu-item {
	opacity: 1;
	transition: opacity .3s .35s;
}
#menu-area {
	display: none;
	z-index: 6;
	position: relative;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
}
#menu-area:hover #menu-wrap {
	transform: translate3d(-7px ,7px ,0);
	-webkit-transform: translate3d(-7px ,7px ,0);
}
#menu-area.on #menu-wrap {
	transform: translate3d(5px ,-5px ,0);
	transition-timing-function: cubic-bezier(1,-3.59,0,4.52);
	transition: .1s;
	-webkit-transform: translate3d(5px ,-5px ,0);
	-webkit-transition-timing-function: cubic-bezier(1,-3.59,0,4.52);
	-webkit-transition: .1s;
}
#menu-area.on {
	transition: .3s .6s;
}
#menu-icon {
	z-index: 6;
	position: relative;
	padding: 20px;
}
#menu-icon li {
	width: 30px;
	height: 2px;
	margin: 4px;
	background-color: #202b5e;
	transition: .6s;
	-webkit-transition: .6s;
}
#menu-icon li.line1 {
	animation: aniLine1dft .6s forwards;
}
#menu-icon li.line3 {
	animation: aniLine3dft .6s forwards;
}
@keyframes aniLine1dft {
	0% {
		transform: translate3d(0,6px,0) rotateZ(45deg);
	}
	50% {
		transform: translate3d(0,6px,0) rotateZ(0deg);
	}
	100% {
		transform: translate3d(0,0,0) rotateZ(0deg);
	}
}
@keyframes aniLine3dft {
	0% {
		transform: translate3d(0,-6px,0) rotateZ(-45deg);
	}
	50% {
		transform: translate3d(0,-6px,0) rotateZ(0deg);
	}
	100% {
		transform: translate3d(0,0,0) rotateZ(0deg);
	}
}


#menu-area.on li.line1 {
	/* transform: translate(0.8px,-2.7px) rotate(45deg) scale(1.3, 1);
	-webkit-transform: translate(0.8px,-2.7px) rotate(45deg) scale(1.3, 1); */
	animation: aniLine1 .6s forwards;
}
#menu-area.on li.line2 {
	opacity: 0;
}
#menu-area.on li.line3 {
	/* transform: translate(-1.7px,-22.3px) rotate(-45deg) scale(1.3, 1) ;
	-webkit-transform: translate(-1.7px,-22.3px) rotate(-45deg) scale(1.3, 1); */
	animation: aniLine3 .6s forwards;
}
@keyframes aniLine1 {
	50% {
		transform: translate3d(0,6px,0) rotateZ(0deg);
	}
	100% {
		transform: translate3d(0,6px,0) rotateZ(45deg);
	}
}
@keyframes aniLine3 {
	50% {
		transform: translate3d(0,-6px,0) rotateZ(0deg);
	}
	100% {
		transform: translate3d(0,-6px,0) rotateZ(-45deg);
	}
}
.lang-menu:hover .sub-lang-list {
	opacity: 1;
	visibility: visible;
	transform: translate(0%, 100%);
}
.sub-lang-list {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(0%, 110%);
	transition: .3s;
}
#container {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 100%;
}
#wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	/*min-height: 100vh;*/
}

.checkbox-type1 input[type="checkbox"],
.checkbox-type1 input[type="radio"] { display: none; }
.checkbox-type1 .rect {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.checkbox-type1 .rect::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 13px;
	border-color: #ff0000;
	border-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	/*opacity: 0;
	visibility: hidden;*/
	transform: scale(0,0) rotate(-45deg) translate(2px, -4px);
	transition: .1s;
}
.checkbox-type1 input:checked + .rect::before,
.checkbox-type1 input:checked + label .rect::before {
	/*opacity: 1;
	visibility: visible;*/
	transform: scale(1,1) rotate(45deg) translate(2px, -5px);
}






.gallery-imgArea {
}
.gallery-imgArea .wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.gallery-imgslider {
	display: inline-block;
	position: relative;
	top: 0;
	width: 100%;
	white-space: nowrap;
	text-align: center;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}
.gallery-imgslider li {
	display: inline-block;
	position: relative;
	top: 0%;
	width: 100%;
	box-sizing: border-box;
	vertical-align: middle;
}
.gallery-imgslider li .image {
	position: relative;
	width: 100%;
	padding-top: 66%;
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.gallery-imgArea .bullet {
	z-index: 100;
	width: 100%;
	position: relative;
	/* margin-top: -44px; */
	padding: 15px;
	text-align: center;
}
.gallery-imgArea .bullet li {
	display: inline-block;
	width: 20px;
	height: 5px;
	background-color: #fff;
	margin: 0 2px;
	cursor: pointer;
}
.gallery-imgArea .bullet li.selected {
	background-color: #202b5e;
}





#search-wrap {
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
	width: 100%;
	max-width: 800px;
	margin: auto;
	padding: 0 5px 20px;
}
#search-wrap select {
	width: 24%;
}
#search-wrap input {
	width: 50%;
}
#search-wrap select,
#search-wrap input {
	padding: 5px 10px;
	border-radius: 0px;
	outline: none;
	border: 1px solid #DDDDDD;
	background-color: #fff;
	appearance: none;
	-webkit-appearance: none;
	transition: .6s;
}
#search-wrap select:focus,
#search-wrap input:focus {
	box-shadow: 0 0 5px #f27903;
	border: 1px solid #f27903;
}
#search-wrap .submit {
	color: #fff;
	width: 24%;
	padding: 6px;
	text-align: center;
	cursor: pointer;
	border-radius: 0px;
}

#transition-mask {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
}
#transition-mask .transition-logo {
	position: relative;
	width: 100%;
	max-width: 250px;
	margin: auto;
	padding-top: 82px;
	background-image: url('/dist/img/logo-wh.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat; 
	opacity: 0;
	transform: scale3d(.8, .8, 1);
}
#transition-mask.on .transition-logo {
	animation-name: fadeLogo;
	animation-duration: 1.3s;
	animation-delay: .8s;
}
@keyframes fadeLogo {
	60% {
		transform: scale3d(0, 0, 1);
		opacity: 0;
	}
	60% {
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
	70% {
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
	100% {
		transform: scale3d(1, 1, 1);
		opacity: 0;
	}
}
#transition-mask .transition-sheet {
	position: absolute;
	width: 150%;
	height: 100%;
	/*transform-origin: 50% 0;
	transform: translate3d(0, 100%, 0);*/
}
#transition-mask .transition-sheet.no1 {
	transform-origin: 150% 50%;
	transform: translate3d(150%, 0, 0);
}
/*#transition-mask .transition-sheet.no1 {
	transform-origin: 150% 50%;
	transform: translate3d(150%, 0, 0) skewX(-40deg);
}
#transition-mask .transition-sheet.no2 {
	transform-origin: 0 50%;
	transform: translate3d(-150%, 0, 0) skewX(40deg);
}*/
#transition-mask.on .transition-sheet {
	animation-duration: 2.6s;
	/*animation-timing-function: cubic-bezier(.4,.6,.2,1);*/
} 
#transition-mask.on .transition-sheet.no1 {
	animation-name: mask-ani;
	/*animation-timing-function: cubic-bezier(.4,.6,.2,1);*/
}
#transition-mask.on .transition-sheet.no2 {
 	animation-name: mask-ani2;
	animation-duration: 3s;
	animation-delay: .5s;
} 
#transition-mask.on {
	z-index: 999;
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}
@keyframes mask-ani {
	40% {
		transform: translate3d(0, 0, 0);
	}
	70% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-120%, 0, 0);
	}
}
@keyframes mask-ani1 {
	/*0% {
		transform: translate3d(120%, 0, 0) skewX(-40deg);
	}*/
	50% {
		transform: translate3d(0, 0, 0) skewX(0deg);
	}
	70% {
		transform: translate3d(0, 0, 0) skewX(0deg);
	}
	100% {
		transform: translate3d(-120%, 0, 0) skewX(20deg);
	}
}
@keyframes mask-ani2 {
	/*0% {
		transform: translate3d(0, 0%, 0);
	}*/
	50% {
		transform: translate3d(0, 0, 0) skewX(0deg);
	}
	70% {
		transform: translate3d(120%, 0, 0) skewX(-20deg);
	}
	100% {
		transform: translate3d(120%, 0, 0) skewX(-20deg);
	}
}

#modal-area {
	z-index: 101;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 98%;
	margin: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(-55%, -50%, 0);
	/*transform: translate3d(-50%, -50%, 0) scale3d(.4, .4, 1);*/
	transition: transform .6s .2s	, opacity .6s .2s, visibility .6s .2s;
}
#modal-area.on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(-50%, -50%, 0);
	/*transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);*/
}
#modal-area .close-area {
	display: block;
	z-index: 100;
	position: absolute;
	top: 70px;
	left: 0;
	width: 50px;
	height: 50px;
	padding: 10px;
}
#modal-area .close-area .close {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#modal-area .close-area .close svg {
	stroke-width: 3;
}
#modal-wrap {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 70px;
	/* background: rgba(0,0,0,.8); */
}
#templete {
	display: flex;
	flex-direction: column;
   	
  position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	/* background: linear-gradient(41deg,#00b0f0 0,#deedf3 100%); */
}
#templete-wrap {
	position: relative;
	width: 100%;
	margin: auto;
	/* background: linear-gradient(-41deg,#00b0f0 0,#deedf3 100%); */
}
#templete-wrap .templete-flex {
	position: relative;
	min-height: 100%;
	margin: 50px 0;
	padding: 0;
	/* box-shadow: 4px 4px 16px rgba(0,0,0,.3); */
	background-color: #fff;
}
#templete-wrap .cont-area h2 {
  font-size: 1.4em;
  font-weight: 600;
  color: #969696;
  padding-bottom: 20px;
}
#templete-wrap .cont-area {
	font-size: 1.2em;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 20px;
}
#templete-wrap .agree-list {
	list-style: disc;
	line-height: 1.6em;
	padding: 0 20px;
}

#g-map-area {
	z-index: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 40px;
	background: #fff;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition-property: opacity, visibility, z-index;
	transition-duration: 1s;
}
#g-map-area.show {
	z-index: 120;
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
	transition-property: opacity, visibility;
}
#g-map-area .close-area {
	display: block;
	z-index: 111;
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	padding: 5px;
	box-sizing: border-box;
}
#g-map-area .close-area .close {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	cursor: pointer;
}
#g-map-area .close-area .close svg {
	stroke-width: 3;
}
#g-map {
	display: inline-block;
	width: 100%;
	height: 100%;
}

#pop-notice {
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	padding: 15px;
	/*background-color: #0f29ff;*/
	transform: translateY(100%);
	animation: popup .6s 1s forwards;
}
#pop-notice.off {
	animation: popupOff .6s forwards;
}
@keyframes popupOff {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}
@keyframes popup {
	to {
		transform: translateY(0);
	}
}
#pop-notice .notice-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
  max-width: 800px;
}
#pop-notice .notice {
	padding: 10px;
	border-bottom: 1px solid #fff;
}
#pop-notice .title {
	font-size: 1.4em;
	font-weight: 800;
	padding-bottom: 8px;
}
#pop-notice .subject {
	font-size: 1.1em;
	font-weight: 500;
	color: #999;
	padding-bottom: 4px;
}
#pop-notice .contents {
	line-height: 1.4em;
}
#pop-notice .contents b {
	font-weight: 600;
	color: #cc292a;
}
#pop-notice .btn-area {
	padding: 10px 20px;
}
#pop-notice .btn {
	display: block;
	padding: 15px 20px;
	cursor: pointer;
	border-radius: 3px;
	/*background-color: #00c586;*/
}

.sect-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 2px;
}
.footer-center-line::before,
.footer-center-line::after {
	content: '';
	position: relative;
	flex: 1 0 auto;
	height: 2px;
}
.vline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
}

.video-center {
  min-width: 100%;
  width: auto;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
@media screen and ( max-width: 1000px ) {
	.m100-vflex { display: flex; }
	.m100-flx-w { display: flex; flex-wrap: wrap; }
	.m100-hidden { display: none; }
	.m100-mxw-0.in-width { max-width: none; }
	.m100-w100 { width: 100%; }
	.m100-w50 { width: 50%; }
	.m100-mg-20 { margin: 20px; }
	.m100-mg-t20 { margin-top: 20px; }
}
@media screen and ( max-width: 800px ) {
	.footer-center-line::after { content: none; }
	.pd-tmenu { padding-top: 62px; }
	.mg-tmenu { margin-top: 62px; }
	.m-ftl { font-size: 1.8em; }
	.m-ft0 { font-size: 1.6em; }
	.m-ft1 { font-size: 1.4em; }
	.m-ft2 { font-size: 1.2em; }
	.m-ft3 { font-size: 1em; }
	.m-ft4 { font-size: .8em; }
	.m-ft-wh { color: #fff; }
	.m-ft-bk { color: #000; }
	.m-ft-lg { color: #eee; }
	.m-hidden { display: none; }
	.m-inst-box { position: relative; }
	.m-img40 { padding-top: 40%; }
	.m-img50 { padding-top: 50%; }
	.m-img60 { padding-top: 60%; }
	.m-img100 { padding-top: 100%; }
	.m-img130 { padding-top: 130%; }
	.m-flx-bsauto { flex-basis: auto; }
	.m-flx-col { flex-direction: column; align-items: flex-start; }
	.m-flx-col-cc { flex-direction: column; align-items: center; justify-content: center; }
	.m-flx-w { flex-wrap: wrap; }
	.m-flx-wc { display: flex; flex-wrap: wrap; justify-content: center; }
	.m-flx-0c {
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.m-order-0 { order: 0; }
	.m-order-1 { order: 1; }
	.m-col-1 { column-count: 1; }
	.m-grid-10 { width: calc(100% + 20px); margin-left: -10px; }
	.m-grid-20 { width: calc(100% + 40px); margin-left: -20px; }
	.m-w50-g5 { width: calc(50% - 10px); }
	.m-w50-g10 { width: calc(50% - 20px); }
	.m-w50-g20 { width: calc(50% - 40px); }
	.m-w100 { width: 100%; }
	.m-w50 { width: 50%; }
	.m-w60 { width: 60%; }
	.m-w40 { width: 40%; }
	.m-w33 { width: 33.3333%; }
	.m-mxw-0 { max-width: none; }
	.m-minw-0 { min-width: auto; }
	.m-minh-0 { min-height: auto; }
	.m-mg-ct { margin-left: auto; margin-right: auto; }
	.m-mg-0 { margin: 0; }
	.m-mg-h0 { margin-top: 0px; margin-bottom: 0px; }
	.m-mg-s0 { margin-left: 0; margin-right: 0; }
	.m-mg-10 { margin: 10px; }
	.m-mg-20 { margin: 20px; }
	.m-mg-t20 { margin-top: 20px; }
	.m-mg-b20 { margin-bottom: 20px; }
	.m-mg-l20 { margin-left: 20px; }
	.m-pd-0 { padding: 0; }
	.m-pd-b0 { padding-bottom: 0; }
	.m-pd-s0 { padding-left: 0; padding-right: 0; }
	.m-pd-10 { padding: 10px; }
	.m-pd-h10 { padding-top: 10px; padding-bottom: 10px; }
	.m-pd-s10 { padding-left: 10px; padding-right: 10px; }
	.m-pd-s20 { padding-left: 20px; padding-right: 20px;}
	.m-pd-t20 { padding-top: 20px; }
	.m-pd-20 { padding: 20px; }
	.m-pd-l20 { padding-left: 20px; }
	.m-pd-40 { padding: 40px; }
	.m-pd-s40 { padding-left: 40px; padding-right: 40px;}
	.m-pd-t40 { padding-top: 40px; }
	.m-pd-b40 { padding-bottom: 40px; }
	.m-pd-h40 { padding-top: 40px; padding-bottom: 40px; }
	.m-txt-center { text-align: center; }
	.m-txt-left { text-align: left; }
	.m-bd-bt-gr { border-bottom: 1px solid #ddd; }
}
@media screen and ( max-width: 600px ) {
	.m60-flx-col { flex-direction: column; align-items: flex-start; }
	.m60-w100 { width: 100%; }
	.m60-w50 { width: 50%; }
	.m60-block { display: block; }
	.m60-grid-5 { width: calc(100% + 10px); margin-left: -5px; }
	.m60-w50-g5 { width: calc(50% - 10px); }
	.m60-w16-g5 { width: calc(16.6667% - 10px); }
	.m60-pd-s0 { padding-left: 0; padding-right: 0; }
}
@media screen and ( max-width: 480px ) {
	.m48-hidden { display: none; }
	.m48-show { display: block; }
	.m48-flx-col { flex-direction: column; align-items: stretch;}
	.m48-w100 { width: 100%; }
	.m48-w36p { width: 36px; flex-basis: 36px }
	.m48-pdt0 { padding-top: 0; }
	.m48-pd-s0 { padding-left: 0; padding-right: 0; }
	.m48-pd-s10 { padding-left: 10px; padding-right: 10px; }
	.m48-pd20 { padding: 20px; }
	.m48-flx-0c {
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.m48-img30 { padding-top: 30%; }
}
@media screen and (max-width: 1200px) {
	.item-box-area .item-wrap.w25 {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}
	#section01-wrap .cont-area .subject {
		font-size: 2.8em;
	}
}
@media screen and (max-width: 1000px) {
	.sect-title-area.sect-title-m1000 {
		flex-direction: row;
		align-items: center;
		position: relative;
		left: 20px;
	}
	.sect-title-area.sect-title-m1000 .num::after {
		content: none;
	}
	.sect-title-area.sect-title-m1000 .title {
		padding-left: 20px;
		bottom: auto;
		transform: none;
	}

	#section06-wrap .contact-area {
		padding-top: 0;
	}
	#section06-wrap .contact-cont {
		padding: 20px;
	}
	#section06-wrap .contatact-wrap {
		position: relative;
	}
}
@media screen and (max-width: 900px) {}
@media screen and (max-width: 800px) {
	#menu-area {
		display: block;
	}
	#menu-cont-area.head-part {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-top: 62px;
		padding: 0;
		text-align: center;
		background: none;
		transform-origin: 50% 0;
		transform: scale(1,0);
		transition: .6s .3s;
	}
	#menu-cont-area.on {
		transform: scale(1,1);
		transition: .6s;
	}
	#menu-cont {
		width: 100%;
		padding: 20px;
		background-color: #fff;
		overflow-y: auto;
    min-height: calc(100vh - 62px);
    height: 0;
	}
	#menu-cont .menu-item {
    display: flex;
    flex-direction: column;
		/*color: #FFF;*/
		z-index: 1;
		position: relative;
		margin: 0vh 0;
		padding: .8em;
		overflow: hidden;
		background: none;
		opacity: 0;
		transform: translate3d(0, 40%, 0);
		transition-property: transform, opacity;
		transition-duration: .3s;
	}
	#menu-cont .menu-item .item {
		border-bottom: 1px solid #999;
	}
	#menu-cont .menu-item .item::after {
		content: none;
	}
	#menu-cont-area.on .menu-item {
		opacity: 1;
		transform: translate3d(0, 0%, 0);
		transition-duration: .3s;
	}
	#menu-cont-area.on .list0 {
		transition-delay: .6s;
	}
	#menu-cont-area.on .list1 {
		transition-delay: .7s;
	}
	#menu-cont-area.on .list2 {
		transition-delay: .8s;
	}
	#menu-cont-area.on .list3 {
		transition-delay: .9s;
	}
	#menu-cont-area.on .list4 {
		transition-delay: 1s;
	}
	#menu-cont-area.on .list5 {
		transition-delay: 1.1s;
	}
	#menu-cont-area.on .list6 {
		transition-delay: 1.2s;
	}
	#menu-cont-area.on .list7 {
		transition-delay: 1.3s;
	}
	#menu-cont .menu-item .item {
		padding: 5px;
		font-weight: 600;
	}
	#menu-cont .sub-menu-list {
		position: relative;
		padding: 6px;
		opacity: 1;
		visibility: visible;
		border: none;
		transform: translateY(0%) scale3d(1,1,1);
	}
	#menu-cont .sub-menu-list .sub-menu-item {
		padding: 2px 10px;
		opacity: 1;
		border: none;
	}
	#menu-cont .menu-item:hover .sub-menu-list,
	#menu-cont .menu-item.selected .sub-menu-list {
		transform: translateY(0%);
	}

	.sect-title-area {
		position: relative;
		left: 0;
	}
	.sect-title-area .num::after {
		content: none;
	}
	.sect-title-area .title {
		bottom: auto;
		transform: none;
	}
	#section00-wrap .flex {
		padding-bottom: 40px;
	}
	#section00-wrap .btn-area {
		padding-bottom: 0;
	}
	#section00-wrap .bottom {
		flex-direction: column;
	}
	#section00-wrap .bottom .text-wrap {
		display: none;
	}
	#scroll-area {
		display: none;
	}
	
	.item-box-area .item-wrap,
	.item-box-area .item-wrap.w25,
	.item-box-area .item-wrap.w50 {
		width: 100%;
		margin-left: auto;
    	margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}
	.section .subject-area {
		font-size: 2em;
	}
	.w33m {
		width: 100%;
	}
	.bd-sd-m {
		border: none;
	}
	#form-mail-area {
		width: 100%;
		border: none;
	}
	#section04-wrap .address,
	#section04-wrap .info-list {
		margin: 0 auto;
		padding-bottom: 20px;
	}
	
	#section05-wrap .board_list {
	}
	#section05-wrap .board_list.selected,
	#section00-wrap .board_list.off {
		flex-direction: column;
		-webkit-flex-direction: column;
    	-ms-flex-direction: column;
	}
	#section05-wrap .board_list .frame {
		width: 80%;
	}
	#section05-wrap .board_list .cont-area {
		width: 100%;
		padding-top: 20px;
	}
	
	#section04 .cont-area .cont-wrap {
		font-size: .7em;
		column-count: 2;
	}
	#temp02-wrap {
		padding: 20px;
	}
	#temp02-wrap .temp-flex {
		margin: 50px 0;
	}
	#footer-area {
		padding: 0;
	}
	#pop-notice .notice-wrap {
		flex-direction: column;
	}
}
@media screen and (max-width: 700px) {}
@media screen and (max-width: 600px) {
	#section00-wrap .flex {
		max-width: 500px;
	}
	#section00-wrap .flex .image-area {
	    margin-top: -20%;
	    margin-left: 30%;
	}
	#section00-wrap .flex .bg-area {
		padding-top: 80%;
	}
	#section00-wrap .flex .bg-area h1 {
		font-size: 1.6em;
	}
	#section00-wrap .flex .bg-area h2 {
		font-size: 2em;
	}
	#section01-wrap .cont-area .contents .inst {
		font-size: 1.5em;
	}
	#section01-wrap .point-area .point-list li {
		font-size: 1em;
	}
	
	#section05-wrap {
		padding: 40px 20px;
	}
	#section05-wrap .category {
		width: 100%;
		padding: 20px;
	}
	#search-wrap {
		flex-flow: wrap;
    	-webkit-flex-flow: wrap;
    	-ms-flex-wrap: wrap;
    	padding: 10px;
	}
	#search-wrap .submit {
		width: 100%;
		margin: 5px 0;
	}
	#search-wrap select {
		width: 29%; 
	}
	#search-wrap input {
		width: 69%;
	}
	#modal-area {
		width: 100%;
		height: 100%;
	}
	#modal-wrap {
		padding-top: 62px;
	}
	#templete-wrap .templete-flex {
		margin: 0;
	}
}
@media screen and (max-width: 480px) {
	#section03-wrap .info-area,
	#form-mail-area {
		padding: 40px 20px;
	}
	
	#footer-area .wrap {
		padding: 60px 20px;
	}
}
.tab-content.hide {
	transition-property: visibility;
	transition-duration: 0s;
}
.tab-content {
	visibility: hidden;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition-duration: .3s, .3s, .3s, 0s;
	transition-property: visibility, opacity, max-height, max-width;
	transition-delay: 0s, 0s, .2s, .2s;
}
.tab-content.selected {
	/*max-height: 8300px;*/
	visibility: visible;
	opacity: 1;
	transition-delay: .2s;
}

.tab-content.tab-width {
	max-width: 0;
}
.tab-content.tab-width.selected {
	max-width: 1000px;
}

.tab-content.tab-accd {
	visibility: visible;
	opacity: 1;
	transition-duration: .3s;
	transition-property: visibility, opacity, max-height, max-width;
	transition-delay: 0.05s;
	transition-timing-function: linear;
}
.tab-content.tab-accd.selected {
	/*max-height: 600px;*/
	transition-duration: .3s;
	transition-delay: 0.05s;
	transition-timing-function: linear;
}
#section00 {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
}
#sect00-canvas {
	
}
#section00 .image-area {
	flex-direction: column;
	justify-content: center;
}
.sect00--img1 {
	background-size: auto 80%;
	background-position: 16.5% 50%;
}
#section00 .main-title-wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}
#section00 .main-title .title {
	position: relative;
	overflow: hidden;
}
#section00 .main-title .title span,
#section00 .main-subject span {
	display: block;
	max-width: 800px;
	opacity: 0;
	visibility: hidden;
}
#section00 .main-title .title.no1 span {
	transform: translate3d(30%, 0, 0);
}
#section00 .main-title .title.no2 span,
#section00 .main-title .title.no0 span {
	transform: translate3d(-30%, 0, 0);
}
#section00 .main-subject span {
	transform: translate3d(10%, 0, 0);	
}
#section00 .image-slide.selected .main-title .title span,
#section00 .image-slide.selected .main-subject span {
	animation-name: mainslide;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes mainslide {
	to {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}
}

#section00-wrap {
	position: absolute;
	bottom: 60px;
	right: 80px;
	transform: translateX(-50%);
}

#section00-wrap .btn-area {
	padding: 20px 0 5vh;
	text-align: center;
}
#section00-wrap .btn {
	display: inline-block;
	font-size: 1.4em;
	font-weight: 600;
	color: #fff;
	width: 100%;
	max-width: 320px;
	padding: 20px 0;
	cursor: pointer;
	background-color: #388f9e;
	transition: background-color .3s;
}
#section00-wrap .btn:hover {
	background-color: #202b5e
}
#scroll-area {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
}
#scroll-area .icn-area {
 	position: relative;
 	margin: 0 auto;
 	text-align: right;
}




@media screen and ( max-width: 800px ) {
	#section00 .main-title-wrap::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.5);
	}
	
}

/*# sourceMappingURL=app.css.map*/