@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
/*
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  --bg: rgb(225, 235, 255);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
}
*/
main {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-end;
  padding: 0rem;
  margin: 0rem;
}
main div {
  margin: 0.3rem 0.5rem;
  position: relative;
}
main div a {
  --color: #000000;
  font-size: 1.2rem;
  position: relative;
  text-decoration: none;
  color: var(--color);
  font-family: "Inter", sans-serif;
  padding: 0.2rem 0;
}
main div a::before {
  --line-width: 105%;
  --line-height: 1px;
  --line-easing: ease;
  --line-transition-duration: 300ms;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--line-width);
  height: var(--line-height);
  transform-origin: right;
  transform: scaleX(0);
  background: var(--color);
  transition: transform var(--line-transition-duration) var(--line-easing);
  z-index: 1;
}
main div a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
main div a:hover span {
  --deg: -45deg;
}
main div a:hover span::before {
  transform: rotate(var(--deg));
}
main div a:hover span::after {
  transform: translateX(-1px) rotate(var(--deg));
}
main div a span {
  --line-arrow-width: 1px;
  --line-arrow-height: 6px;
  --line-arrow-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
  --line-arrow-transition-duration: 200ms;
  --line-arrow-transition-delay: 240ms;
}
main div a span::before, main div a span::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: 0px;
  background: var(--color);
  transition: transform var(--line-arrow-transition-duration) var(--line-arrow-easing);
  transition-delay: var(--line-arrow-transition-delay);
  z-index: 2;
}
main div a span::before {
  width: var(--line-arrow-width);
  height: var(--line-arrow-height);
  transform-origin: 0% 100%;
  transform: rotate(-90deg);
}
main div a span::after {
  height: var(--line-arrow-width);
  width: var(--line-arrow-height);
  transform-origin: 100% 0%;
  transform: translateX(-1px) rotate(0deg);
}

.support {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: #333333;
  font-size: 1.2rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale3d(1.1);
}


/**********                   하위 메뉴                                       *******************************************************************/


.menu ul {
	position: absolute;
	top: 40px;		/* 하위메뉴 출발위치 */
	left: 0;
	padding-top:5px;
	padding-bottom:7px;
	opacity:0;
	
	background: #000000;  /* 서브배경색 */

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu div:hover > ul { opacity: .70; } /* 서브배경투명도 */

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;
	border-left: none;
	
	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu div:hover > ul li {
	height: 35px;
	overflow: visible;
	padding: 0 10;
}

.menu ul li:hover > a { color:#a4ddff;}   /* 하위메뉴롤오버 */

.menu ul li a, .menu ul li .level_1 {
	display:block;
			/* 하위메뉴배경크기 */
	padding: 7px 0 7px 12px;
	margin: 0;
	line-height: 18px;
	

	border: none;
/*	border-bottom: 1px solid #353539;*/
	
	/*font-family: 나눔고딕, 돋움, 굴림, Verdana, Helvetica, Arial, sans-serif;*/
	font-weight: 100;
	font-size: 0.9rem;
	color: #ffffff;
	/*text-shadow: 1px 1px 1px rgba(0,0,0,.6);*/
}

/* 하위메뉴출발위치 좌우, 배경크기 */
.menu div:nth-child(3) ul	{left:0px;}

/* 하위메뉴배경크기 */
.menu div:nth-child(2) ul li	{width:170px;}
.menu div:nth-child(2) ul li a {width:160px;}
.menu div:nth-child(3) ul li	{width:220px;}
.menu div:nth-child(3) ul li a {width:210px;}
.menu div:nth-child(4) ul li	{width:130px;}
.menu div:nth-child(4) ul li a {width:120px;}
.menu div:nth-child(5) ul li	{width:90px;}
.menu div:nth-child(5) ul li a {width:80px;}



/******************************************************************************************************************/
/**********                   오른쪽 메뉴                                       *******************************************************************/
/******************************************************************************************************************/

/* Right Side Menu */
input[id="menuicon"] {display:none;}
/* Hamberger Icon*/
input[id="menuicon"] + ul {}
input[id="menuicon"] + ul {display:block;position:fixed;right:0;transition:all .35s;text-align:right;}
input[id="menuicon"] + ul > li {display:block;width:50px;height:50px;border:0px solid #f1f1f1;position:relative;margin-top:-1px;}
input[id="menuicon"] + ul > li > a {display:block;width:auto;height:50px;overflow:hidden;transition:all .35s;}
input[id="menuicon"] + ul > li > label {display:block;cursor:pointer;width:auto;height:50px;background:#000000;  border-top-left-radius: 0.5rem;  border-bottom-left-radius:  0.5rem;}
input[id="menuicon"] + ul > li:nth-child(1) label span {display:block;position:absolute;width:50%;height:3px;border-radius:30px;background:#fff;transition:all .35s;}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(1) {top:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(2) {top:50%;left:50%;transform:translate(-50%,-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(3) {bottom:30%;left:50%;transform:translateX(-50%);}

input[id="menuicon"]:checked + ul {z-index:2;right:250px;z-index:10;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label {z-index:2;right:0px;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(1) {top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(3) {bottom:50%;left:50%;transform:translate(-50%,50%) rotate(-45deg);}

div[class="sidebar"] {width:250px;height:100%;background:#000000;position:fixed;top:0;right:-250px;z-index:10;transition:all .35s; overflow:auto;}
label[class="sidebar_bg"] {width:100%;height:100%;background:rgba(0,0,0,.6);position:fixed;top:0;left:0;z-index:9;transition:all .35s;display:none;}

input[id="menuicon"]:checked + ul + div {right:0;}
input[id="menuicon"]:checked + ul + div + label {display:block;}


/* Right Side Menu Contents */
.side_menu {width: 100%; /*width: 15rem; border-radius: 0.2rem;*/ overflow: hidden;padding-top:2.5rem;}
.side_menu a { font-size: 0.9rem;text-decoration: none;text-align: left;}
.menu-item { list-style: none; border-bottom: 1px solid #303030;  margin:0 1rem; overflow: hidden;}
/* 큰메뉴 버튼 디자인 */
.side_btn { display: block; padding: 0.8rem 1rem; background: #000000;color: white; position: relative;}
/* 큰메뉴 버튼 아래쪽 화살표 */
.side_btn::before { content: ''; position: absolute; width: 0.9rem; height: 0.8rem; background: #000000; left: .5rem; bottom: -0.3rem; transform: rotate(45deg);}
/* 작은메뉴 묶음 <div> 테그 */
.menu-item__sub { background: #333; overflow: hidden; transition: max-height 0.3s; max-height: 0;}
/* 작은메뉴 각각 <a> 테그 */
.menu-item__sub a { display: block; padding: 0.5rem 1.4rem; color: white; font-size: 0.8rem; position: relative; border-bottom: 1px solid #3b3b3b;}
.menu-item__sub a::before { content: ''; position: absolute; left: 0; top: 0; width: 0.4rem; height: 100%; background: #000000; transform: translatex(-0.4rem); transition: 0.3s; opacity: 0;}
.menu-item__sub li a:hover::before { opacity: 1; transform: translatex(0);}
/* 큰메뉴 링크 */
.menu-item:target .menu-item__sub {max-height: 50em;}
/* 1,2Level 메뉴 */
.menu-item__sub li .level_1	{display: block; padding: 0.7rem 1.4rem; color: white; font-size: 0.8rem; position: relative; border-bottom: 1px solid #3b3b3b;}
.menu-item__sub li .level_2	{padding:0.5rem 2rem;}