@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

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

#nav-toggle {
		position: fixed;
		top: 25px;
		right: 25px;
		height: 32px;
		cursor: pointer;
}
#nav-toggle > div {
		position: relative;
		width: 36px;
}
#nav-toggle span {
		width: 100%;
		height: 2px;
		left: 0;
		display: block;
		background: #000;
		position: absolute;
		transition: transform 0.3s ease-in-out, top 0.5s ease;
		/* #nav-toggle close */
}
#nav-toggle span:nth-child(1) {
		top: 0;
}
#nav-toggle span:nth-child(2) {
		top: 14px;
		width: 70%;
}
#nav-toggle span:nth-child(3) {
		top: 28px;
		width: 40%;
}
#nav-toggle:hover span:nth-child(1) {
		top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
		top: 23px;
}

.open #nav-toggle span:nth-child(1) {
		top: 15px;
		transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
		top: 15px;
		width: 0;
		left: 50%;
}
.open #nav-toggle span:nth-child(3) {
		top: 15px;
		transform: rotate(-45deg);
		width: 100%;
}

/* z-index */
#nav-toggle {
		z-index: 1000;
}

#container {
		z-index: 900;
}

#gloval-nav {
		background: rgba(255,255,255,0.95);	
		color: #fff;
		position: fixed;
		width: 90%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		font-size: 20px;
		padding: 20% 5% 5%;
		transform: translateX(-100%);
		transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#gloval-nav nav {
		z-index: 999;
		width: 100%;
}

.open #gloval-nav {
		transform: translateX(0);
}

.open #gloval-nav li {
		transform: translateX(0);
}

#gloval-nav .contact-area{
		z-index: 999;
		width: 100%;
		margin: 0 auto;
		position: relative;
		clear: both;
}
#gloval-nav .contact-area .btn{
		width: 100%;
		margin: 0 auto;
}
#gloval-nav .contact-area .btn a{
		background: url(../../../../images/contact-menu-icon.svg) no-repeat center;
		width: 100%;
		height: 160px;
		margin: 0 auto;
		text-indent: -9999px;
}
#gloval-nav .contact-area .btn {
		transform: translateX(-0px);
		transition: transform 1.3s ease;
		position: relative;
}
#gloval-nav .contact-area .btn:after {
		content: "";
		display: block;
		left: -0px;
		position: relative;
		transform: translateX(0);
		transition: transform 1s ease;transition-delay: 0.15s;
}

#gloval-nav .contact-area .btn:hover:after {
		content: "";
		display: block;
		left: -0px;
		width: 100px;
		height: 0px;
		background: #fff;
		transform: translateY(-10px);
}
	
.h1title{
		width: 100%;
		padding-top: 20%;
		background: url(../images/main_logo.svg)no-repeat ;
		padding-bottom: 10px;
		margin: 0 auto;
		overflow: hidden;
		text-indent: -9999px;
}
.cntbox{
		width: 100%;
		height: 700px;
		background: #fff;
		padding-bottom: 10px;
		margin: 0 auto;
		overflow: hidden;
}	
	
.cntbox .nav{
		width: 100%;
}
.cntbox .nav ul{
		margin: 0;
		padding: 0;
		list-style: none;
}
.cntbox .nav li a{
		width: 100%;
		position: relative;
		font-weight: normal;
		font-size:1.5em;
		text-decoration: none;
		text-align: left;
		color: #000;
		margin-bottom: 15px;
		display: block;
		-webkit-transition: all 0.2s ease-in-out; 
		-moz-transition: all 0.2s ease-in-out; 
		-o-transition: all 0.2s ease-in-out; 
		transition: all 0.2s ease-in-out;
		font-family: 'Oswald', sans-serif;
}
.cntbox .link-list{
		position: relative;
		top: 0;
		left:-40px;
	}
.cntbox .link-list ul{
		width: 100%;
		list-style: none;
	}
.cntbox .link-list li{
		float: left;
		margin: 1px;
		transition: all 0.2s ease-in-out;
	}
.cntbox .link-list li a{
		display: block;
		width: 60px;
		height: 60px;
		
	}
.cntbox .link-list li:hover{
		filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}
.cntbox .link-list .icon-line{
		background: url(../images/icon_line.svg) no-repeat #333;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-lineblog{
		background: url(../images/icon_lineblog.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-tw{
		background: url(../images/icon_tw.svg) no-repeat #333;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-inst{
		background: url(../images/icon_inst.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-tiktok{
		background: url(../images/icon_tiktok.svg) no-repeat #333;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-music{
		background: url(../images/icon_music.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-spo{
		background: url(../images/icon_spo.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
	
}	

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

#nav-toggle {
		position: fixed;
		top: 3%;
		right: 2%;
		height: 32px;
		cursor: pointer;
}
#nav-toggle > div {
		position: relative;
		width: 36px;
}
#nav-toggle span {
		width: 100%;
		height: 2px;
		left: 0;
		display: block;
		background: #000;
		position: absolute;
		transition: transform 0.3s ease-in-out, top 0.5s ease;
		/* #nav-toggle close */
}
#nav-toggle span:nth-child(1) {
		top: 0;
}
#nav-toggle span:nth-child(2) {
		top: 14px;
		width: 70%;
}
#nav-toggle span:nth-child(3) {
		top: 28px;
		width: 40%;
}
#nav-toggle:hover span:nth-child(1) {
		top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
		top: 23px;
}

.open #nav-toggle span:nth-child(1) {
		top: 15px;
		transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
		top: 15px;
		width: 0;
		left: 50%;
}
.open #nav-toggle span:nth-child(3) {
		top: 15px;
		transform: rotate(-45deg);
		width: 100%;
}

/* z-index */
#nav-toggle {
		z-index: 1000;
}

#container {
		z-index: 900;
}

#gloval-nav {
		background: rgba(255,255,255,0.95);
		color: #fff;
		position: fixed;
		width: 60%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		font-size: 29px;
		padding: 2% 20%;
		transform: translateX(-150%);
		transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.h1title{
		width: 100%;
		height: 230px;
		background: url(../images/main_logo.svg)no-repeat;
		padding-bottom: 0;
		margin: 0 auto;
		overflow: hidden;
		text-indent: -9999px;
}
.cntbox{
		width: 100%;
		height: 600px;
		padding-bottom: 10px;
		margin: 0 auto;
		overflow: hidden;
}	
	
.cntbox .nav{
		width: 100%;
		margin-bottom: 30px;
		overflow: hidden;
}
.cntbox .nav ul{
		margin: 0;
		padding: 0;
		list-style: none;
}
.cntbox .nav li a{
		width: 30%;
		position: relative;
		font-weight: normal;
		font-size:1.6em;
		text-decoration: none;
		text-align: left;
		color: #000;
		margin-bottom: 10px;
		display: block;
		-webkit-transition: all 0.2s ease-in-out; 
		-moz-transition: all 0.2s ease-in-out; 
		-o-transition: all 0.2s ease-in-out; 
		transition: all 0.2s ease-in-out;
		font-family: 'Oswald', sans-serif;
}
.cntbox .nav li a:hover{
		filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}

.open #gloval-nav {
		transform: translateX(0);
}

.open #gloval-nav li {
		transform: translateX(0);
}

.cntbox .link-list{
		position: relative;
		top: 0;
		left:-35px;
	}
.cntbox .link-list ul{
		width: 100%;
		list-style: none;
	}
.cntbox .link-list li{
		float: left;
		margin: 1px;
		transition: all 0.2s ease-in-out;
	}
.cntbox .link-list li a{
		display: block;
		width: 80px;
		height: 80px;
		
	}
.cntbox .link-list li:hover{
		filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}
.cntbox .link-list .icon-line{
		background: url(../images/icon_line.svg) no-repeat #333;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-lineblog{
		background: url(../images/icon_lineblog.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-tw{
		background: url(../images/icon_tw.svg) no-repeat #333;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-inst{
		background: url(../images/icon_inst.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-tiktok{
		background: url(../images/icon_tiktok.svg) no-repeat #333;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-music{
		background: url(../images/icon_music.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
.cntbox .link-list .icon-spo{
		background: url(../images/icon_spo.svg) no-repeat #000;
		background-size: 100%;
		text-indent: -9999px;
	}
	
}